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 帮助
https://www.cnblogs.com/storebook/p/9409349.html
2、
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

Code-NFine:jqgrid 数据绑定相关推荐

  1. .NET Core 3.0预览版7中的ASP.NET Core和Blazor更新

    .NET Core 3.0 Preview 7现已推出,它包含一系列ASP.NET Core和Blazor的新更新. 以下是此预览中的新功能列表: 最新的Visual Studio预览包括.NET C ...

  2. Code:NFine目录

    ylbtech-Code:NFine目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech 出处:http://ylbtech.cnblogs. ...

  3. JQuery 操作表格和JqGrid了解

    登录 | 注册 mike_caoyong的专栏 目录视图 摘要视图 订阅 CSDN日报20170322--<关于软件研发的一些体会总结>    同步博客至 CSDN ,让更多开发者看到你的 ...

  4. tablednd保存 php,jqgrid中使用tableDnd插件,jqgridtablednd插件

    jqgrid中使用tableDnd插件,jqgridtablednd插件 首先准备jquery.jqgrid.tableDnd等js文件. tableDnD建议到GitHub上直接下载src包,避免一 ...

  5. 给jqGrid数据行添加修改和删除操作链接

    我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1&qu ...

  6. SilverLight学习笔记--Silverlight之数据绑定初探

    数据绑定(Data Binding)是用户界面UI和业务对象或其它数据提供者(data provider)的连接.用户界面对象称为目标,数据提供者成为数据源.   数据绑定帮助隔离应用程序的用户界面层 ...

  7. WPF数据绑定(1-简单数据绑定)

    2019独角兽企业重金招聘Python工程师标准>>> 附WPF书籍推荐: 1.不要为书籍经销商的炒作蒙蔽,国内翻译的<WPF揭秘>被褒扬成经典,其实我认为该书浅尝则止, ...

  8. Spring MVC-05循序渐进之数据绑定和form标签库(下) 实战从0到1

    概述 功能概述 搭建SpringMVC Maven工程 pom.xml 部署描述符web.xml 配置Spring MVC配置文件 日志配置文件 Domain类 Controller类 Service ...

  9. 基于Object.defineProperty实现双向数据绑定

    双向数据绑定可算是前端领域经久不衰的热词,不管是前端开发还是面试都会有所涉及.而且不同的框架也想尽一切办法去实现这一特性,比如: Knockout / Backbone --- 发布-订阅模式 Ang ...

  10. vue 双向数据绑定的实现学习(一)

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

最新文章

  1. 零基础学python培训需要学习多久?
  2. SAP零售业解决方案
  3. oracle rac服务供应商,【Oracle Database】Oracle RAC(八):服务资源管理
  4. hardfault常见原因_XMC实验分享之四十八: Cortex M0的Hard Fault发生原因
  5. python装饰器带参数函数_当我使用带参数的python装饰器时,如何将参数传递给最内部的函数?...
  6. @Component注解的用法
  7. 论文笔记_S2D.05-2012-ECCV-从立体图像中提取与场景一致的三维对象和深度
  8. python格式化字符串怎么_Python格式化字符串
  9. 2022-2028年中国半导体照明(LED)产业投资分析及前景预测报告(全卷)
  10. 模式识别--绪论 什么是模式识别?模式识别的主要方法及具体应用
  11. office 2010 激活 toolkit.exe 应用程序正常初始化失败
  12. 2012年科技行业那些事:IT巨头加紧冲刺步伐
  13. 【网络取证篇】suy网络工具包
  14. shp文件纯前端的上传、解析、编辑、下载
  15. 计算机基础知识对程序员来说有多重要?
  16. LigerUI视频教程_基于LigerUI前端技术实现的管理平台
  17. 网络密码破解的十个方法
  18. JavaScript脚本语言基础(三)
  19. encrypted勒索病毒攻击nas服务器,服务器中了勒索病毒解密数据恢复
  20. 三年黑盒测试工程师对嵌入式软件测试的理解

热门文章

  1. 通达信 移动平均算法_财富趋势,它的产品叫通达信
  2. linux上机考试题(Linux基础)
  3. java实现人脸识别(附源码)
  4. Windows以下系统蓝屏cmd一句话命令
  5. 中国省市区三级联动带下拉美化带数据库
  6. 三菱5uplc伺服电机指令_实例 | PLC触摸屏控制伺服电机程序设计
  7. java 铁路管理信息系统_java多线程之铁路售票系统
  8. 2017c语言国二试题,国家计算机c语言二级考试试题
  9. 计算机多媒体教室管理制度,新疆大学多媒体教室管理制度
  10. XenApp之高可用篇