Code-NFine：jqgrid 数据绑定

最新推荐文章于 2024-04-30 19:40:07 发布
最新推荐文章于 2024-04-30 19:40:07 发布
阅读量455 收藏 2
点赞数
文章标签： 数据库 javascript json ViewUI
原文链接：http://www.cnblogs.com/storebook/p/9428777.html
版权
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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/9428777.html

weixin_30511107
关注
jqGrid 实现分组两种情况（绑定动态数据、绑定本地数据）
旭东怪的博客
01-04 962
1实现分组（绑定动态数据） function initGrid(gridId,colModel){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatype: 'json', height: $(window).height() - 115, width: $(window).width() - 7, .
jqGrid 实现排序（绑定动态数据和本地数据）
旭东怪的博客
01-07 3419
1 实现排序（绑定动态数据） function initGrid(gridId){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatype: 'json', height: $(window).height() - 115, width: $(window).width() - 7, r
jqgrid客户端绑定数据源
xzzkq198510的博客
03-01 549
这里写自定义目录标题欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。@{ ViewBag.Title = “编号规则表单”; Layout = “~/Views/Shared/_Index.cshtml”; }...
jqGrid使用
IT民工的博客
07-08 871
jqGrid 介绍jqGrid 基于jquery 的最好的表格组件 jqGrid-githubjqueryUI异步数据代码示例var colNames = [];//列名 function dotable() { //渲染表格数据 //执行表格刷新 var tmp = []; $("#gridTable").jqGrid({
重构JQGrid的查询操作，在查询后，如何绑定数据到JQGrid中？
程序E生
03-20 3337
由于工作需要，JQGrid的查询操作，虽然功能很强大，但是太隐蔽，让很多人不方便使用，所以打算重构查询操作，查询之后，数据无法绑定到表格中，经网上搜索得到如下解决方案： var myjsongrid = eval("("+msg+")"); $("#you_grid")[0].addJSONData(myjsongrid);  msg——返回的表格数据
zhongdaiqi-NFine-master_NFine_C#ERP_ERP_
09-30
NFine.Framework框架在网上算是一款比较好的基于C# MVC+EF6+Bootstrap 框架。这款框架的使用场景：OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统。
NFine快速开发框架.zip
06-12
报表功能是NFine框架的一大亮点，它提供了丰富的报表设计和展示方式，包括表格、图表等形式，支持数据导出和打印，满足日常业务分析和决策的需求。 6. **UI组件库** NFine框架通常搭配一套响应式的前端框架，如...
Nfine-master
01-31
6. **业务逻辑处理**：Nfine-master可能提供了抽象的业务层，使得开发者可以专注于编写业务逻辑，而无需关心底层数据访问的细节。 7. **用户界面层**：框架可能包含一套UI组件和模板，用于快速构建响应式和用户体验...
c# NFine-去掉几个js后门版
04-10
【标题】"C# NFine-去掉几个js后门版" 涉及的主要知识点是C#编程语言和NFine框架的安全性问题，特别是针对JavaScript后门的防范。NFine是一个基于C#开发的企业级应用快速开发框架，它提供了一整套的解决方案，包括...
TAPA-MVS：纹理感知的PatchMatch多视图立体
104130TAPA-MVS：纹理感知的PatchMatch多视图立体0AndreaRomanoni，意大利米兰理工大学0andrea.romanoni@polimi.it0MatteoMatteucci，意大利米兰理工大学0matteo.matteucci@polimi.it0摘要0多视图立体中最成功的方法...
Laravel开发-taobao-top-client
08-28
Laravel开发-taobao-top-client Laravel 5.1的淘宝顶级客户端（SDK）
{转载} Grid中绑定前台数据的一些小方法
aisuishao7740的博客
11-10 118
平时自己老记不住如何在前台的Grdi上做模板数据绑定，记在blog上，方便以后查验。。。//====转载开始======1.DataBinder.Eval用法 //显示二位小数 <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "${0:F2}") %> //{0:G}代表显示True或False &l...
对jqgrid的某列绑定事件
luowu的博客
12-07 7463
html
jqGrid用法汇总(全经典)
最新发布
男神的专栏
04-30 2777
rowid：当前行id；设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有’sum’,‘avg’和’count’。
NFine框架中jqgrid增加多选操作
weixin_30336061的博客
12-18 560
于框架中没有包含多选操作，一直想实现出来，今天改出来后发现项目中确实需要多选操作的地方不多，以后还是按需修改吧，保持整体风格的一致。由于使用了jqgrid的插件，查了几个api就搞定了，不多说，直接贴代码，只贴需要更改的地方 <style type="text/css"> /*多选框高度位置样式，宽度额外增加 31 */ #gridList tr td inp...
bootstrap获取表格中选中行的值_bootstrapTable 数据表格 点击行选中行内容
weixin_39755003的博客
12-19 927
用post请求的时候必须加上contentType:"application/x-www-form-urlencoded; charset=UTF-8",var $table;//初始化bootstrap-table的内容function InitMainTable () {//记录页面bootstrap-table全局变量$table，方便应用var queryUrl = '/TestUser/...
Goods增删改查index.cshtml
qq_39974897的博客
08-25 391
$(function () {             $("#goodsList").datagrid({                 fitColumns: true,                 singleSelect: true,                 rownumbers: true,                 pagination: true,//分
在线编辑页面功能实现（FineUI开发一）
刘欣的CSDN博客
12-14 1176
FineUI的使用环境说明： FineUI免费版，VS2019，Entity Framework 6.2.0 我有一个在线编辑的页面，点“新增”数据可以像excel一样编辑，编辑完成后点保存，可以直接保存到数据库里。 页面的截图如下： 一、我们来看看数据库查询的数据怎么到网格控件中： 1、用LINQ把全部数据查询出来。 2、统计总条数，用LINQ的分页功能，拿到第一页的数据，把第一页的数据显示到网格工具中。 private void BindGrid() { .
jqGrid
weixin_33692284的博客
11-01 269
<script> $(function () { gridList(); }) function gridList() { var $gridList = $("#gridList"); $gridList.dataGrid({ url: "/SystemManage/User/GetGr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值