Code-NFine:jqgrid 数据绑定

ylbtech-Code-NFine:jqgrid 数据绑定
1. jqgrid 基本列展示返回顶部
1、

1.1、.cshtml

$(function () {
        gridList();
    })
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/SystemManage/Duty/GetGridJson",
            height: $(window).height() - 96,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: '岗位名称', name: 'F_FullName', width: 150, align: 'left' },
                { label: '岗位编号', name: 'F_EnCode', width: 150, align: 'left' },
                {
                    label: '归属机构', name: 'F_OrganizeId', width: 150, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
                    }
                },
                {
                    label: '创建时间', name: 'F_CreatorTime', width: 80, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
                },
                {
                    label: "有效", name: "F_EnabledMark", width: 60, align: "center",
                    formatter: function (cellvalue) {
                        return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
                    }
                },
                { label: '备注', name: 'F_Description', width: 300, align: 'left' }
            ]
        });
        $("#btn_search").click(function () {
            $gridList.jqGrid('setGridParam', {
                postData: { keyword: $("#txt_keyword").val() },
            }).trigger('reloadGrid');
        });
    }

1.1.2、

<div class="gridPanel">
    <table id="gridList"></table>
</div>

1.2、.cs

[HttpGet]
        [HandlerAjaxOnly]
        public ActionResult GetGridJson(string keyword)
        {
            var data = dutyApp.GetList(keyword);
            return Content(data.ToJson());
        }
2、
2. jqgrid 基本列展示+分页返回顶部
1、
1.1、.cshtml
1.2、
$(function () {
        gridList();
    })
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/SystemManage/User/GetGridJson",
            height: $(window).height() - 128,
            colModel: [
                { label: '主键', name: 'F_Id', hidden: true },
                { label: '账户', name: 'F_Account', width: 80, align: 'left' },
                { label: '姓名', name: 'F_RealName', width: 80, align: 'left' },
                {
                    label: '性别', name: 'F_Gender', width: 60, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == true) {
                            return '男';
                        } else {
                            return '女';
                        }
                    }
                },
                { label: '手机', name: 'F_MobilePhone', width: 100, align: 'left' },
                {
                    label: '公司', name: 'F_OrganizeId', width: 150, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
                    }
                },
                {
                    label: '部门', name: 'F_DepartmentId', width: 80, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
                    }
                },
                {
                    label: '岗位', name: 'F_DutyId', width: 80, align: 'left',
                    formatter: function (cellvalue, options, rowObject) {
                        return top.clients.duty[cellvalue] == null ? "" : top.clients.duty[cellvalue].fullname;
                    }
                },
                {
                    label: '创建时间', name: 'F_CreatorTime', width: 80, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d', newformat: 'Y-m-d' }
                },
                {
                    label: "允许登录", name: "F_EnabledMark", width: 60, align: "center",
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == 1) {
                            return '<span class=\"label label-success\">正常</span>';
                        } else if (cellvalue == 0) {
                            return '<span class=\"label label-default\">禁用</span>';
                        }
                    }
                },
                { label: '备注', name: 'F_Description', width: 200, align: 'left' }
            ],
            pager: "#gridPager",
            sortname: 'F_DepartmentId asc,F_CreatorTime desc',
            viewrecords: false
        });
        $("#btn_search").click(function () {
            $gridList.jqGrid('setGridParam', {
                postData: { keyword: $("#txt_keyword").val() },
            }).trigger('reloadGrid');
        });
    }
1.1.2、
<div class="gridPanel">
    <table id="gridList"></table>
    <div id="gridPager"></div>
</div>

 1.2、.cs

        [HttpGet]
        [HandlerAjaxOnly]
        public ActionResult GetGridJson(Pagination pagination, string keyword)
        {
            var data = new
            {
                rows = userApp.GetList(pagination, keyword),
                total = pagination.total,
                page = pagination.page,
                records = pagination.records
            };
          
2、
3.返回顶部
 
4.返回顶部
 
5.返回顶部
 
 
6.返回顶部
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

猜你喜欢

转载自www.cnblogs.com/storebook/p/9428777.html