jQuery jqgrid 应用实例

1.html

<div class="ibox-content">
　　<div class=\"jqGrid_wrapper\">
　　　　<table id="table_list_1"></table>
　　　　<div id="pager_list_1"></div>
　　</div>
</div>

 

2.js

        function func_InitGrid() {
            var url = '@Url.Action("GetDetails", "Code")';
            var c = [
                { name: "ID", hidden: true, key: true },
                { name: "CODE", width: "60px", label: '编码' },
                { name: "NAME", width: "60px", label: '名称' },
                { name: "SNUMBER", width: "60px", label: '开始' },
                { name: "ENUMBER", width: , label: '结束' },
                { name: "NOWNUMBER", width: , label: '可用' },
                { name: "RESIDU", width: "", label: '剩余数' },

            ];
            $('#table_list_1').CTable(url, c,
                {
                    sortname: 'UPDATETIME',
                    sortorder: 'desc'
                });
        }

CTable: function (f, j, e) {
            $.jgrid.defaults.styleUI = 'Bootstrap';
            $.each(j, function (c, k) {
                if (k.isdate) {
                    k.formatter = 'date';
                    k.formatoptions = {
                        srcformat: 'Y/m/d H:i:s',
                        newformat: 'Y/m/d'
                    };
                }
                if (k.month) {
                    k.formatter = 'date';
                    k.formatoptions = {
                        srcformat: 'Y/m/d H:i:s',
                        newformat: 'Y/m'
                    };
                }
                if (k.label == 'btn') {
                    k.name = '';
                    k.label = '操作';
                    if (k.width) {
                    } else {
                        k.width = 60;
                    }
                    k.fixed = true;
                    k.align = 'center';
                    k.sorttype = 'string';
                    k.formatter = function (l, m, n) {
                        return $.map(k.btns, function (o) {
                            return '<a href="javascript:;" class="alinks alinks-blue"  onclick="' + o.click + '(' + '\'' + m.rowId + '\'' + ');">' + o.btn_name + '</a>';
                        }).join('&nbsp;');
                    };
                }
                k.sortable = false;
                k.align = 'left';
                k.name = k.name.toUpperCase();
                k.index = k.name;
            });
            var d = this.next();
            var i = {
                url: f,
                mtype: 'POST',
                datatype: 'json',
                height: 370,
                autowidth: true,
                shrinkToFit: true,
                autoScroll: true,
                rownumbers: true,
                rowNum: 15,
                rowList: [
                  15,
                  20,
                  30
                ],
                colModel: j,
                pager: d,
                viewrecords: true,
                hidegrid: false,
                ondblClickRow: function (k, m, c, l) {
                },
                loadComplete: function (c) {
                    if (c.Code == -1) {
                        $.alert(c.Message);
                    }
                },
                onSelectRow: function (k, c) {
                },
                gridComplete: function () {
                },
                onSelectAll: function (k, c) {
                    _log(k);
                    _log(c);
                }
            };
            var g = $.extend({
            }, i, e);
            this.jqGrid(g);
            var h = this;
            $(window).bind('resize', function () {
                var c = h.parents('.jqGrid_wrapper').width() - 5;
                h.setGridWidth(c);
            });
            $(window).trigger('resize');
        }

4.后台

        public ActionResult GetDetails()
        {
            using( var dbContext = new WjCitizen.DAL.smdEntities())
            {
                var query = from m in dbContext.BOOKNUMBER
                            select m;
                var name = this.Ndy("CODE");
                if (!string.IsNullOrEmpty(name))
                {
                    query = query.Where(m => m.DEPTCODE.Contains(name));
                }
                var exami = this.Ndy("NAME");
                if (!string.IsNullOrEmpty(exami))
                {
                    query = query.Where(m => m.DEPTNAME.Contains(exami));
                }
                return query.GetJson();
            }
        }

        public static string Ndy(string k)
        {
            var o = HttpContext.Current.Request.Params[k];
            if (o == null)
                return string.Empty;return  o.Trim();
        }