Jqgrid简单实用

1.引用相关头文件

引入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);
                }, 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/