Jqgrid简单实用
2016-12-13 10:34
148 查看
1.引用相关头文件
引入CSS:
引入JS:
引包之前必须先引入Jquery 包 , 否则无法生产表格。
grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载,否则会出问题。
样式包是基于ACE框架和bootstrap。所以效果和jqueryUI样式不同 如果不实用次样式可直接单独引入jqgrid自带CSS样式文件。
页面中创建table 容器
效果图如下:
jqgrid的重要选项
url :jqGrid控件通过这个参数得到需要显示的数据,具体的返回值可以使XML也可以是Json。
datatype :这个参数用于设定将要得到的数据类型。
mtype : 定义使用哪种方法发起请求,GET或者POST。
height :Grid的高度,可以接受数字、%值、auto,默认值为150。
width :Grid的宽度,如果未设置,则宽度应为所有列宽的之和;如果设置了宽度,则每列的宽度将会根据shrinkToFit选项的设置,进行设置。
autowidth :默认值为false。如果设为true,则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段;如果当父容器尺寸变化了,同时也需要变化Grid的尺寸的话,则需要在自己的代码中调用setGridWidth方法来完成。
pager :定义页码控制条Page Bar,在上面的例子中是用一个div来放置的。
sortname :指定默认的排序列,可以是列名也可以是数字。
rownumbers:true 显示序号列。
rownumWidth: 50, 序号列宽度50.
viewrecords :设置是否在Pager显示所有记录的总数。
rowNum :用于设置Grid中一次显示的行数,默认值为20。正是这个选项将参数rows(prmNames中设置的)通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定,则Grid也只显示rowNum设定的行数。
rowList :一个数组,用于设置Grid可以接受的rowNum值。例如[10,20,30]。
colNames :字符串数组,用于指定各列的题头文本,与列的顺序是对应的。
colModel :最重要的数组之一,用于设定各列的参数。
colModel的重要选项
name :为Grid中的每个列设置唯一的名称,这是一个必需选项,其中保留字包括subgrid、cb、rn。
index :设置排序时所使用的索引名称。
label :当jqGrid的colNames选项数组为空时,为各列指定题头。如果colNames和此项都为空时,则name选项值会成为题头。
width :设置列的宽度,目前只能接受以px为单位的数值
sortable :设置该列是否可以排序,默认为true。
resizable :设置列是否可以变更尺寸,默认为true。
hidden :设置此列初始化时是否为隐藏状态,默认为false。
formatter :预设类型或用来格式化该列的自定义函数名。常用预设格式有:integer、date、currency、number等(具体参见文档 )。
API文档 网址:http://blog.mn886.net/jqGrid/
引入CSS:
<link href="../../Content/styles/bootstrap.min.css" rel="stylesheet" /> <link href="../../Content/styles/font-awesome-min.css" rel="stylesheet" /> <link href="../../Content/styles/ui-framework-min.css" rel="stylesheet" /> <link href="../../Content/styles/ace-fonts.css" rel="stylesheet" /> <link href="../../Content/styles/ace-min.css" rel="stylesheet" />
引入JS:
<script src="../../Content/scripts/jquery/jquery-1.10.2.js"></script> <script src="../../Content/scripts/jqGrid/grid.locale-cn-min.js"></script> <script src="../../Content/scripts/jqGrid/jqGrid.js"></script> <script src="../../Content/scripts/jqGrid/jquery-ui-custom.min.js"></script> <script src="../../Content/scripts/jqGrid/jquery.jqGrid.src-min.js"></script>
引包之前必须先引入Jquery 包 , 否则无法生产表格。
grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载,否则会出问题。
样式包是基于ACE框架和bootstrap。所以效果和jqueryUI样式不同 如果不实用次样式可直接单独引入jqgrid自带CSS样式文件。
<link href="../../Content/scripts/jqGrid/css/jqgrid.css" rel="stylesheet" />
页面中创建table 容器
<div> <div class="col-xs-12"> <table id="gridTable"></table> <div id="gridPager"></div> </div> </div> <script> $(document).ready(function () { $(window).on('resize.jqGrid', function () { $("#gridTable").jqGrid('setGridWidth', $(".page-content").width()); }); GetGrid(); }); function GetGrid() { $("#gridTable").jqGrid({ url: "choujian.txt", datatype: "json", height: "auto", autowidth: true, colNames: ['序号', '行政单位', '抽检次数', '抽检结果(合格)', '抽检结果(不合格)'], colModel: [ { name: 'id', index: 'id', align: 'center', width: 30, hidden:true, }, { name: 'xzdw', index: 'xzdw', align: 'center', }, { name: 'cjcs', index: 'cjcs', align: 'center', editable: true, }, { name: 'hg', index: 'hg', align: 'center', editable: true, }, { name: 'bhg', index: 'bhg', align: 'center', editable: true, }, ], pager: "#gridPager", viewrecords: true, sortname: 'id', sortorder: 'asc', rownumbers: true, rownumWidth: 50, //shrinkToFit: false, loadComplete: function () { var t = this; setTimeout(function () { updatePagerIcons(t); 4000 }, 0); } }); $(window).triggerHandler('resize.jqGrid'); } </script>
效果图如下:
jqgrid的重要选项
url :jqGrid控件通过这个参数得到需要显示的数据,具体的返回值可以使XML也可以是Json。
datatype :这个参数用于设定将要得到的数据类型。
mtype : 定义使用哪种方法发起请求,GET或者POST。
height :Grid的高度,可以接受数字、%值、auto,默认值为150。
width :Grid的宽度,如果未设置,则宽度应为所有列宽的之和;如果设置了宽度,则每列的宽度将会根据shrinkToFit选项的设置,进行设置。
autowidth :默认值为false。如果设为true,则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段;如果当父容器尺寸变化了,同时也需要变化Grid的尺寸的话,则需要在自己的代码中调用setGridWidth方法来完成。
pager :定义页码控制条Page Bar,在上面的例子中是用一个div来放置的。
<div id="gridPager"></div>
sortname :指定默认的排序列,可以是列名也可以是数字。
rownumbers:true 显示序号列。
rownumWidth: 50, 序号列宽度50.
viewrecords :设置是否在Pager显示所有记录的总数。
rowNum :用于设置Grid中一次显示的行数,默认值为20。正是这个选项将参数rows(prmNames中设置的)通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定,则Grid也只显示rowNum设定的行数。
rowList :一个数组,用于设置Grid可以接受的rowNum值。例如[10,20,30]。
colNames :字符串数组,用于指定各列的题头文本,与列的顺序是对应的。
colModel :最重要的数组之一,用于设定各列的参数。
colModel的重要选项
name :为Grid中的每个列设置唯一的名称,这是一个必需选项,其中保留字包括subgrid、cb、rn。
index :设置排序时所使用的索引名称。
label :当jqGrid的colNames选项数组为空时,为各列指定题头。如果colNames和此项都为空时,则name选项值会成为题头。
width :设置列的宽度,目前只能接受以px为单位的数值
sortable :设置该列是否可以排序,默认为true。
resizable :设置列是否可以变更尺寸,默认为true。
hidden :设置此列初始化时是否为隐藏状态,默认为false。
formatter :预设类型或用来格式化该列的自定义函数名。常用预设格式有:integer、date、currency、number等(具体参见文档 )。
API文档 网址:http://blog.mn886.net/jqGrid/
相关文章推荐
- HTC封装,相对真实的进度条,简单实用。
- 改善编码风格(超级简单实用)
- 简单但还比较实用的模板技术
- DataGrid 导出 EXCEL(简单,实用)
- 简单实用的DataSet更新数据库的类+总结(转~给懒得写sp的人)
- 简单实用的DATAGRID组件
- 简单实用的c++快速排序模板类
- 简单实用的重写URL(URLRewriter.dll)
- 简单实用的DataSet更新数据库的类+总结(c#) 选择自 allen_21229 的 Blog
- 改善编码风格(超级简单实用)
- [网络基础]高效实用:用简单命令测试网络性能
- 一种简单实用的全屏方法
- 一个简单实用的遗传算法c程序(转载)
- [JS脚本][实用小软件]一个简单的汉字简体繁体转换工具源代码
- 一个简单实用的数据库操作框架
- 一个简单实用的数据库操作框架
- 逐段注释--最简单,最方便,最快速,最实用,最高效,最清晰,最直接,最好的调试方法
- struts 中文问题解决(简单实用)
- 一个简单实用的sql数据库查询工具(c#)
- 简单实用 Firefox最有用的20大插件热力推荐