文档章节

Code-NFine:jqgrid 数据绑定

o
 osc_pn11u1x9
发布于 2018/08/06 10:11
字数 1367
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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.1.1、pager: "#gridPager"
1.2、 viewrecords: true
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. jqgird 基本展示+gridTree返回顶部
1、
1.1、treeGrid: true,treeGridModel: "adjacency"
1.1、 .cshtml
$(function () {
        gridList();
    })
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            treeGrid: true,
            treeGridModel: "adjacency",
            ExpandColumn: "F_EnCode",
            url: "/SystemManage/Organize/GetTreeGridJson",
            height: $(window).height() - 96,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: '名称', name: 'F_FullName', width: 200, align: 'left' },
                { label: '编号', name: 'F_EnCode', width: 150, align: 'left' },
                {
                    label: '分类', name: 'F_CategoryId', width: 80, align: 'left',
                    formatter: function (cellvalue) {
                        if (cellvalue == "Group") {
                            return "集团";
                        } else if (cellvalue == "Company") {
                            return "公司";
                        } else if (cellvalue == "Department") {
                            return "部门";
                        } else if (cellvalue == "WorkGroup") {
                            return "小组";
                        }
                    }
                },
                {
                    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 GetTreeGridJson(string keyword)
        {
            var data = organizeApp.GetList();
            if (!string.IsNullOrEmpty(keyword))
            {
                data = data.TreeWhere(t => t.F_FullName.Contains(keyword));
            }
            var treeList = new List<TreeGridModel>();
            foreach (OrganizeEntity item in data)
            {
                TreeGridModel treeModel = new TreeGridModel();
                bool hasChildren = data.Count(t => t.F_ParentId == item.F_Id) == 0 ? false : true;
                treeModel.id = item.F_Id;
                treeModel.isLeaf = hasChildren;
                treeModel.parentId = item.F_ParentId;
                treeModel.expanded = hasChildren;
                treeModel.entityJson = item.ToJson();
                treeList.Add(treeModel);
            }
            return Content(treeList.TreeGridJson());
        }
2、
4. 组合条件查询返回顶部
1、

1.1、 .cshtml

$(function () {
        gridList();
    })
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            url: "/SystemSecurity/DbBackup/GetGridJson",
            height: $(window).height() - 96,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: '数据库名', name: 'F_DbName', width: 100, align: 'left' },
                { label: '备份名称', name: 'F_FileName', width: 200, align: 'left' },
                { label: '大小', name: 'F_FileSize', width: 100, align: 'left' },
                {
                    label: '备份模式', name: 'F_BackupType', width: 100, align: 'left',
                    formatter: function (cellvalue) {
                        if (cellvalue == "1") {
                            return "完整备份";
                        } else if (cellvalue == "2") {
                            return "差异备份";
                        }
                    }
                },
                {
                    label: '备份时间', name: 'F_CreatorTime', width: 100, align: 'left',
                    formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i', newformat: 'Y-m-d H:i' }
                },
                { label: '备份人员', name: 'F_CreatorUserId', width: 100, align: 'left' },
                { label: '备份说明', name: 'F_Description', width: 300, align: 'left' }
            ]
        });
        $("#txt_condition .dropdown-menu li").click(function () {
            var text = $(this).find('a').html();
            var value = $(this).find('a').attr('data-value');
            $("#txt_condition .dropdown-text").html(text).attr('data-value', value)
        });
        $("#btn_search").click(function () {
            var queryJson = {
                condition: $("#txt_condition").find('.dropdown-text').attr('data-value'),
                keyword: $("#txt_keyword").val()
            }
            $gridList.jqGrid('setGridParam', {
                postData: { queryJson: JSON.stringify(queryJson) },
            }).trigger('reloadGrid');
        });
    }

1.1.2 

<div id="txt_condition" class="btn-group">
    <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="javascript:void()" data-value="DbName">数据库名</a></li>
        <li><a href="javascript:void()" data-value="FileName">备份名称</a></li>
    </ul>
</div>
1.2、 .cs
        [HttpGet]
        [HandlerAjaxOnly]
        public ActionResult GetGridJson(string queryJson)
        {
            var data = dbBackupApp.GetList(queryJson);
            return Content(data.ToJson());
        }
2、
5. jqgrid 级联查询返回顶部
1、
1.1、.cshtml
1.1.1、
$(function () {
        $('#layout').layout();
        treeView();
        gridList();
    });
    function treeView() {
        $("#itemTree").treeview({
            url: "/SystemManage/ItemsType/GetTreeJson",
            onnodeclick: function (item) {
                $("#txt_keyword").val('');
                $('#btn_search').trigger("click");
            }
        });
    }
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.dataGrid({
            height: $(window).height() - 96,
            colModel: [
                { label: "主键", name: "F_Id", hidden: true, key: true },
                { label: '名称', name: 'F_ItemName', width: 150, align: 'left' },
                { label: '编号', name: 'F_ItemCode', width: 150, align: 'left' },
                { label: '排序', name: 'F_SortCode', width: 80, align: 'center' },
                {
                    label: "默认", name: "F_IsDefault", width: 60, align: "center",
                    formatter: function (cellvalue) {
                        return cellvalue == true ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
                    }
                },
                {
                    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 == true ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
                    }
                },
                { label: "备注", name: "F_Description", index: "F_Description", width: 200, align: "left", sortable: false }
            ]
        });
        $("#btn_search").click(function () {
            $gridList.jqGrid('setGridParam', {
                url: "/SystemManage/ItemsData/GetGridJson",
                postData: { itemId: $("#itemTree").getCurrentNode().id, keyword: $("#txt_keyword").val() },
            }).trigger('reloadGrid');
        });
    }
1.1.2、
<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div id="itemTree"></div>
    </div>
    <div class="ui-layout-center">
        <div class="topPanel">
            <div class="toolbar">
            </div>
            <div class="search">
            </div>
        </div>
        <div class="gridPanel">
            <table id="gridList"></table>
        </div>
    </div>
</div>
1.2、  .cs
1.2.1、/SystemManage/Controlers/ItemsTypeControler.cs
        [HttpGet]
        [HandlerAjaxOnly]
        public ActionResult GetTreeJson()
        {
            var data = itemsApp.GetList();
            var treeList = new List<TreeViewModel>();
            foreach (ItemsEntity item in data)
            {
                TreeViewModel tree = new TreeViewModel();
                bool hasChildren = data.Count(t => t.F_ParentId == item.F_Id) == 0 ? false : true;
                tree.id = item.F_Id;
                tree.text = item.F_FullName;
                tree.value = item.F_EnCode;
                tree.parentId = item.F_ParentId;
                tree.isexpand = true;
                tree.complete = true;
                tree.hasChildren = hasChildren;
                treeList.Add(tree);
            }
            return Content(treeList.TreeViewJson());
        }
1.2.2、/SystemManage/Controlers/ItemsDataControler.cs
        [HttpGet]
        [HandlerAjaxOnly]
        public ActionResult GetGridJson(string itemId, string keyword)
        {
            var data = itemsDetailApp.GetList(itemId, keyword);
            return Content(data.ToJson());
        }
2、
 
6.返回顶部
1、jqGrid 帮助
2、
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

macz技巧分享—macOS高端使用技巧

Macos 的占有量不如 Windows,两者之间当操作方式也有很大的不同,当很多人熱悉 Windows 的操作之后,再接触 macos,觉得难上手,其实是习惯问题。如果你学习一些技巧,会觉得 macos 其实也不...

mac小叮当
59分钟前
11
0
手把手教你如何用黑白显示器显示彩色!

来源:大数据文摘 本文约1000字,建议阅读6分钟。 本文为你介绍如何通过黑白显示器上也能显示出彩色。 原来在黑白显示器上也能显示出彩色啊!通过在监视器上覆盖拜耳滤色镜,并拼接彩色图像,...

osc_jklrr90y
59分钟前
18
0
key-value结构排序:给定一个字符串,统计每个字符出现频率,先按value降序,再按key升序

对于key-value结构的排序 第一种:lambda表达式 第二种:函数 第三种:类对()的重载,仿函数形式 #include <iostream>#include <vector>#include <unordered_map>#include <string>#in......

osc_gwtkg2dc
今天
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》 目录 世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球...

osc_vew1u0h0
今天
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三)

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三) 目录 2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》 演讲嘉宾 演讲内容 ...

osc_8o71811p
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部