jQuery easyuI datagrid

jQuery easyuI datagrid 多行编辑

在easyUI 动态绑定部分数据后，需要有部分列可以修改，研究了一天终于搞定。这是小弟的做法，望各位有好招的大侠指点。

1.添加jQuery 和jQuery easyuI的引用。

2.添加id为tt的table和获取行数据测试按钮getChangeValue

 

<div id="setRoleDiv" style=" display:none;">
            <iframe id="frmSetRole" src="" scrolling="no" width="100%" height="100%" frameborder="0">
            </iframe>
        </div>

        <input type="button"  value="getChangeValue" onclick="showChange()"/>

3.页面加载时通过url调用后台json数据。并对列进行和相关事件,属性绑定。代码如下

 

$(function () {
LoadInitData();

//根据查询条件加载列表
$("#btnQuerySearch").click(function (e) {
var strName = $("#searchUName").val();
var strMail = $("#searchMail").val();
LoadInitData({ UserName: strName, Email: strMail });
});

$("#frmEdit").css("display", "none");

});

function LoadInitData(queryParams) {
$('#tt').datagrid(
{
url: '/UserInfo/GetPageUserInfo',
title: '演示表格使用',
'auto',
height: 370,
fitColumns: true,
idField: 'ID',
loadMsg: '正在加载用户的信息...',
pagination: true,
singleSelect: false,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: queryParams,
columns: [[
{ field: 'ck', checkbox: true, align: 'left', 50, height: 40 },
{ field: 'ID', title: '主键', 80 },
{ field: 'UserName', title: '用户名', 120 },
{ field: 'PassWord', title: '密码', 80 },
{ field: 'Email', title: '邮箱', 80 },
{ field: 'Address', title: '住址', 80 },
{ field: 's', title: 'ss', 80, editor: { type: 'numberbox', required:true, options: { precision: 1}} },
{ field: 'CreateDate', title: '提交时间', 80, align: 'right',
//日期为null时 此格式不可用，只能加载第一页数据
formatter: function (value, row, index) {
return (eval(value.replace(//Date((d+))//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
}
}
// ,{field:'showprice',title:'商品价格',80,align:'right',
// styler:function(value,row,index){
// if (value < 20){
// return 'background-color:#ffee00;color:red;';
// }
// },
// formatter:function(value,row,index){
// return "<a href='#' onclick='editGoodsPrice(" + row.goodsid + ");return false;'>" + value + "</a>";
// }
// }
]],
toolbar: [{
id: 'btnDownShelf',
text: '添加',
iconCls: 'icon-add',
handler: function () {
//显示 添加div层;
$("#addDialog").css("display", "");

//弹出窗口
InitShowAddDialog();
}
}, {
id: 'btnDownShelf',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
dealEdit();
}
}
, {
id: 'btnDownShelf',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
dealDelete();
}
}
, {
id: 'btnSetRole',
text: '设置用户角色',
iconCls: 'icon-redo',
handler: function () {
dealSetRole();
}
},'-', {
text: 'accept',
iconCls: 'icon-save',
handler: function () {
$('#tt').datagrid('acceptChanges');
}
}
],
onHeaderContextMenu: function (e, field) {

},
onClickRow: function (e) {
$('#tt').datagrid('beginEdit',e);
}
});

}

以上代码注意

(1)触发可编辑的列（ss）需要添加editors列属性editor: { type: 'numberbox', required:true, options: { precision: 1}}

(2)通过grid的onClickRow事件触发可编辑的列（ss）。
  onClickRow: function (e) {
                   $('#tt').datagrid('beginEdit',e);//'beginEdit‘方法必须有一个参数
                }

(3)接受改变值，并获取选中列的值

   function showChange() {
            ('#tt').datagrid('acceptChanges');//'acceptChanges'方法提交所有修改的数据，提交后的数据将不能再修改或者回滚。             var data =('#tt').datagrid('getSelections');
        }

 结果如下图

 

 

分类: js jquery