在EasyUI的DataGrid中嵌入Combobox
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/46687767
在做项目时，需要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，终于看到了它的庐山真面：
核心代码如下：
<html>
@*添加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>
<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\":\"否\"}]";