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.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) == ? 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) == ? 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、
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
Code-NFine：jqgrid 数据绑定的更多相关文章
- WPF中的数据绑定！！！
引用自:https://msdn.microsoft.com/zh-cn/magazine/cc163299.aspx 数据点: WPF 中的数据绑定 数据点 WPF 中的数据绑定 John Pap ...
- 【笔记】WPF实现ViewPager引导界面效果及问题汇总
最近在开发项目的首次使用引导界面时,遇到了问题,引导界面类似于安卓手机ViewPager那样的效果,希望通过左右滑动手指来实现切换不同页面,其间伴随动画. 实现思路: 1.界面布局:新建一个UserC ...
- 动态合并GridView数据行DataRow的列
前段时间,Insus.NET一直在演示GridView控件Header头行或列:<动态变更GridView控件列名>和<动态合并或定制GridView控件Header头某些列> ...
- .NET Core 3.0预览版7中的ASP.NET Core和Blazor更新
.NET Core 3.0 Preview 7现已推出,它包含一系列ASP.NET Core和Blazor的新更新. 以下是此预览中的新功能列表: 最新的Visual Studio预览包括.NET C ...
- NFine框架JqGrid导出选中行为Excel实现方法
客户端 function PostAndGetFileByUrl(url,type,postdata) { var temp; $.ajax({ url: url, type: type, data: ...
- WPF 数据绑定 使用Code First with Database
一.准备工作 1.开发工具 Visual Studio 2013 2.安装 Entity Framework 6 Tools for Visual Studio 2012 & 2013 来实现 ...
- Code：NFine目录
ylbtech-Code:NFine目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylb ...
- Code：NFine框架
ylbtech-Code:NFine框架 1.返回顶部 1. 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出 ...
- 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM
刚过去的周五(3-14)例行地主持了技术会议,主题正好是<UI层的设计模式——从Script.Code Behind到MVC.MVP.MVVM>,是前一天晚上才定的,中午花了半小时准备了下 ...
随机推荐
- 济南day1
预计分数:100+100+30 实际分数:10+60+20 T1立方数(cubic) 题目描述 LYK定义了一个数叫“立方数”,若一个数可以被写作是一个正整数的3次方,则这个数就是立方数,例如1,8, ...
- Springboot 工具类静态注入
用springboot搭了一个项目,里面要用到一个DictUtils,因为要用到DictMapper,在百度找了一些方法,最后用下面的方法能成功获取到DictMapper @Component pub ...
- ASP.NET Core默认注入方式下如何注入多个实现（多种方式） - sky 胡萝卜星星 - CSDN博客
原文:ASP.NET Core默认注入方式下如何注入多个实现(多种方式) - sky 胡萝卜星星 - CSDN博客 版权声明:本文为starfd原创文章,转载请标明出处. https://blog.c ...
- 【J2EE】十三个规范：愿天下苍生，人人如猿。
学习了J2ee后对java这个立足标准化的行为感到深深的佩服. 收买什么都不如收买人心,培养啥子都不如培养 习惯.没错,java就是在培养行业习惯,以一纸规范屹立不倒.毕竟技术什么的层出不穷,再新再前 ...
- BUPT复试专题—C翻转(2010)
https://www.nowcoder.com/practice/74bdb725421c4f80b4aca7266818baf0?tpId=67&tqId=29639&rp=0&a ...
- UVa 10295 - Hay Points
题目:有非常多工人.相应一个能力描写叙述表,每种能力有一个权值,求每一个工人的能力值. 分析:字符串.hash表,字典树.利用散列表或者字典树存储相应的单词和权值.查询就可以. 说明:注意初始化,计算 ...
- Raw-OS源代码分析之消息系统-Queue_Buffer
分析的内核版本号截止到2014-04-15,基于1.05正式版.blogs会及时跟进最新版本号的内核开发进度,若源代码凝视出现"???"字样,则是未深究理解部分. Raw-OS官方 ...
- mysql (primary key)_(unique key)_(index) difference
MYSQL index MYSQL索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录开始扫描整个表的所有记录,直至找 ...
- 鼠标滚轮实现图片的缩放-------Day79
今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了.一则工作确实紧了些,再则没能处理好生活.工作和学习的节奏.这才是人生最大的课题吧.只是也还好.至少自己还在坚持着.事实上真的越 ...
- JS简单正则得到字符串中特定的值
这里就直接看演示样例吧.演示样例的目的是为了获取 a 字符串中的 c02806015 <script language="javascript"> var a = '礼 ...