在EasyUI的DataGrid中嵌入Combobox
在做项目时，须要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，最终看到了它的庐山真面：
核心代码例如以下：
<html>
<head>
@*加入Jquery EasyUI的样式*@
<link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" />
<link href="@Url.Content("../../Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" /> @*加入Jquery。EasyUI和easyUI的语言包的JS文件*@
<script src="@Url.Content("../../Content/JqueryEasyUI/jquery-1.8.0.min.js")"></script>
<script src="@Url.Content("../../Content/JqueryEasyUI/jquery.easyui.min.js")"></script>
<script src="@Url.Content("../../Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"></script> @*实现对EasyUI的DataGird控件操作的JS代码*@
<script type="text/javascript"> $(function () {
//当页面首次刷新的时候运行的事件
initTable();
}); //实现新闻DataGird控件的绑定操作
function initTable(queryData) {
$('#test').datagrid({ //定位到Table标签，Table标签的ID是test
fitColumns: true,
url: '/News/QueryAllNews', //指向后台的Action来获取当前用户的信息的Json格式的数据
title: '新闻公告', //表格标题
striped: true, //斑马线效果
pagination: true, //分页工具栏
rownumbers: true, //显示行号
onClickCell: onClickCell, //点击单元格触发的事件（重要）
onAfterEdit:onAfterEdit, //编辑单元格之后触发的事件（重要）
idField: 'NewsID', //标识字段
queryParams: queryData, //异步查询的參数
columns: [[
{ field: 'ck', checkbox: true },
{ title: '主键', field: 'NewsID', sortable: true, hidden: true, },
<span style="white-space:pre"> </span> { title: '内容标题', field: 'NewsTitle', width: 50, sortable: true },
<span style="white-space:pre"> </span> { title: '详细内容', field: 'NewsContent', sortable: true, hidden: true, },
<span style="white-space:pre"> </span> { title: '创建时间', field: 'TimeStamp', sortable: true, },
<span style="white-space:pre"> </span> { title: '所属类别', field: 'CategoryName', sortable: true, },
<span style="white-space:pre"> </span> { title: '创建人', field: 'UserName', sortable: true },
<span style="white-space:pre"> </span> {
title: '是否在首页显示', field: 'IsShow', sortable: true,
editor: {
type: 'combobox',
options: {
valueField: 'text',
textField: 'text',
method: 'get',
url: '/News/ReturnIsShowData',
required: true
}
}
}
]],
toolbar: [{
id: 'btnadd',
text: '加入',
iconCls: 'icon-add',
handler: function () {
//实现弹出注冊信息的页面
AddNews();
}
}, '-', {
id: 'btncut',
text: '改动',
iconCls: 'icon-cut',
handler: function () {
//实现改动的方法
UpdateLzjs();
}
}, '-', {
id: 'btnCancle',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
//实现直接删除全部数据的方法
DeleteLzjs();
}
}]
});
} $.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
}); var editIndex = undefined;
//推断是否编辑结束
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#test').datagrid('validateRow', editIndex)) {
$('#test').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
} //点击单元格触发的事件
function onClickCell(index, field) {
if (endEditing()) {
$('#test').datagrid('selectRow', index)
.datagrid('editCell', { index: index, field: field });
editIndex = index;
}
} //编辑完单元格之后触发的事件
function onAfterEdit(index, row, changes) { //…运行编辑单元格后须要运行的操作…
//…运行编辑单元格后须要运行的操作…
}
}
</script>
</head>
<body>
<table id="test" style="width: 955px; margin: 20px 0 10px 8px" title="新闻中心" iconcls="icon-edit">
</table>
</body>
</html>
在Combobox类型的editor的数据源url: '/News/ReturnIsEnabledData'在相应Controller中相应的方法为（事实上就是在后台拼了个特别简单的json串）：
public string ReturnIsShowData()
{
string strJson = "[{\"id\":\"yes\",\"text\":\"是\"},{\"id\":\"no\",\"text\":\"否\"}]";
return strJson;
}
当选择了Combobox中的值时，仅仅须要把将要运行的操作写在onAfterEdit(index, row, changes)函数中就可以，index为编辑的行号，默认从0開始；row为被编辑单元格所在的整个行，row.列名能够获得此行此列的数据，如row.IsShow能够获得被编辑单元格所在行的IsShow列的数据。
（此文内容基于Asp.net MVC）
在EasyUI的DataGrid中嵌入Combobox的更多相关文章
- EasyUI 的DataGrid中DateTime的格式化问题
想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图) 在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们 ...
- easyui datagrid 中添加combobox
项目需要,如下图所示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- EasyUI——DataGrid中嵌入Radio
前一篇博客写到项目中的广告位管理,当时没有写到今天的问题,这个问题当时也是困扰我好久. 经过自己的努力和同志们的帮助,最后最终解决. 实现要求把全部的广告位后面的单选button设成一组,目的是一个广 ...
- hibernate左连接查询时在easyUI的dataGrid中有些行取值为空的解决办法
1 当使用left join左连连接,sql语句为 select t from SecondPage t left join t.rightNavbar n where 1=1 页面中出现了部分空行的 ...
- EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题
初始化界面,发现编辑datagrid,不能输入小数点. var arrColumnsCNT = [[ { title: '毛重', field: 'GrossWeight', halign: 'cen ...
- EasyUI获取DataGrid中某一列的所有值
function count() { var rows = $('#dg'').datagrid('getRows')//获取当前页的数据行 var total = 0; for (var i = 0 ...
- easyui获取datagrid中的某一列的所有值
function getCol(){ var rows = $("#dg").datagrid("getRows"); var total = "&q ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- easyui datagrid中关联combox
datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...
随机推荐
- HTML习题附答案
第一章 1．HTML指的是( A ). A超文本标记语言(Hyper Text Markup Language) B家庭工具标记语言(Home Tool Markup Language) C超 ...
- java缓存的使用
缓存1,缓存的定义与作用2,缓存的使用范围(命中率高.高访问量)3,缓存策略(命中率,最大元素,清空策略);4,缓存介质(内存缓存,硬盘缓存,数据库缓存)(本地缓存(ehcache,oscache)与 ...
- 888. Fair Candy Swap@python
Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that Ali ...
- 【简●解】[AHOI2009]中国象棋
[题目大意] 叫你在\(n×m\)的棋盘上放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,问有多少种放置方法. [关键词] \(DP\) 分类讨论 乘法和加法原理 [分析] 仔细观察就会发 ...
- Tomcat server.xml配置文件
server.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to ...
- js的闭包中关于执行环境和作用链的理解
首先讲一讲执行环境: 执行环境按照字面上来理解就是指目前代码执行所在的环境. 当JavaScript代码执行的时候,会进入不同的执行上下文,这些执行上下文会构成了一个执行上下文栈(Execution ...
- 解决Can’t finish GitHub sharing process Successfully created project ‘GitHubDemo’ on GitHub
Can't finish GitHub sharing process Successfully created project 'KeyWordsFrameWork' on GitHu ...
- 【Ts 4】ftp服务器搭建
一.为什么需要ftp? 分布式环境一般都有一个专门的图片服务器存放图片.我们使用虚拟机搭建一个专门的服务器来存放图片.在此服务器上安装一个nginx来提供http服务,安装一个ftp服务器来提供图片上 ...
- google的三篇论文
文章:MapReduce/GFS/BigTable三大技术资料 文章:Google File System(中文翻译) 文章:MapReduce:超大机群上的简单数据处理 文章:Google's Bi ...
- bzoj5108 [CodePlus2017]可做题 位运算dp+离散
[CodePlus2017]可做题 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 87 Solved: 63[Submit][Status][Dis ...