最近手头有个web项目需要用到第三方控件(easyui),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点，该项目中有个需求，需要在数据列表中直接编辑数据保存，行话叫做行内编辑。
在讲行内编辑之前，我们需要先了解如何使用easyui创建一个datagrid，当然方式有很多（1.easyui.js，或者直接html代码加easyui的style），我采用的是js的方式：
一、使用js创建datagrid
上面是效果图，
html代码如下：在页面定义一个table
<!--数据展示 --> <div> <table id="datagridinbound"></table> </div>
js代码如下：
有几个我自己认为比较重要的属性在此标记下
url：这里是datagrid获取数据集的地址，就是你的action，需要注意的是，你的action需要返回json格式的数据。
pagination：设置datagrid是否分页显示
queryparams：你的查询条件参数
formatter：格式化，在日期列用到了，easyui的datagrid显示日期如果不格式话，日期会乱显示
这些属性在easyui的官网都有详细介绍，我就不深入解释了。
我要评论
$("#datagridinbound").datagrid({
title: '入库详情',
idfield: 'id',
rownumbers: 'true',
url: '/inbound/getpageinboundgoodsdetail',
pagination: true,//表示在datagrid设置分页
rownumbers: true,
singleselect: true,
striped: true,
nowrap: true,
collapsible: true,
fitcolumns: true,
remotesort: false,
loadmsg: "正在努力加载数据，请稍后...",
queryparams: { productname: "", status: "",sqno:"" },
onloadsuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'id', hidden: 'true' },
{ field: 'inboundid', hidden: 'true' },
{ field: 'productid', hidden: 'true' },
{ field: 'producttypeid', hidden: 'true' },
{ field: 'sqno', title: '入库参考号', width: '100', align: 'left', sortable: true },
{
field: 'status', title: '状态', width: '100', align: 'left', sortable: true,
formatter: function (value, index, row) {
if (value == "1") {
return '<span style="color:green;">已入库</span>';
}
else if (value == "-1") {
return '<span style="color:#ffa54f;">待入库</span>';
}
}
},
{
field: 'inbounddate', title: '入库日期', width: '100', align: 'left', sortable: true,
formatter: function (date) {
var pa = /.*\((.*)\)/;
var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串
return gettime(unixtime);
}
},
{ field: 'productname', title: '产品名称', width: '100', align: 'left', sortable: true },
{ field: 'producttype', title: '产品类型', width: '100', align: 'left', sortable: true },
{ field: 'num', title: '数量', width: '100', align: 'left', sortable: true },
{ field: 'storage', title: '所属仓库', width: '100', align: 'left', sortable: true },
{ field: 'companycode', title: '所属公司', width: '100', align: 'left', sortable: true },
{ field: 'createby', title: '操作人', width: '100', align: 'left', sortable: true },
]],
});
二、今天的重点，datagrid行内编辑
如上效果图，我们在datagrid行内直接变数据
js代码如下：
如何实现行内编辑，需要在你所编辑的单元格中加入editor属性，editor属性有个type（他支持很多控件类型，可以到官网查看）就是编辑的控件类型。
比如说，上图中“入库状态”，首先我们定义数据源，json格式是重点。
var inboundstatus = [{ "value": "1", "text": "入库" }, { "value": "-1", "text": "待入库" }];
然后需要格式转换函数，不然你选择的时候只会显示value值，不是显示文本值。代码如下：
function unitformatter(value, rowdata, rowindex) {
if (value == 0) {
return;
}
for (var i = 0; i < inboundstatus.length; i++) {
if (inboundstatus[i].value == value) {
return inboundstatus[i].text;
}
}
}
如何把数据源绑定到datagrid列中，代码如下：
formatter：使用我们前面定义的转换格式函数。
options：中的data就是我们定义的数据源。
valuefield:选中后的value值，不用详细解释了吧
textfield：选中后显示的值，文本值。
type：combobox，就是下拉选项的样式。
{
field: 'status', title: '入库状态', formatter: unitformatter, editor: {
type: 'combobox', options: { data: inboundstatus, valuefield: "value", textfield: "text" }
}
},
//这部分代码请结合下面的创建grid的js代码查看。
$("#datagrid").datagrid({
title: "产品列表",
idfield: 'productid',
treefield: 'productname',
onclickcell: onclickcell,
striped: true,
nowrap: true,
collapsible: true,
fitcolumns: true,
remotesort: false,
sortorder: "desc",
pagination: true,//表示在datagrid设置分页
rownumbers: true,
singleselect: false,
loadmsg: "正在努力加载数据，请稍后...",
url: "/inbound/getproductpage",
onloadsuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
//如果通过调用reload方法重新加载数据有数据时显示出分页导航容器
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'productid', title: '产品id', hidden: true },
{ field: 'categoryid', title: '分类id', hidden: true },
{ field: 'productname', title: '产品名称', width: '100', align: 'left', sortable: true },
{ field: 'companycode', title: '所属公司', width: '100', align: 'center', sortable: true },
{ field: 'categoryname', title: '所属分类', width: '100', align: 'center', sortable: true },
{ field: 'num', title: '数量', editor: 'numberbox' },
{
field: 'status', title: '入库状态', formatter: unitformatter, editor: {
type: 'combobox', options: { data: inboundstatus, valuefield: "value", textfield: "text" }
}
},
{
field: 'indate', title: '入库日期', width: '100', editor: {
type: 'datebox'
}
},
{
field: 'storage', width: '100', title: '所入仓库',
formatter: function (value, row) {
return row.storage || value;
},
editor: {
type: 'combogrid', options: {
//url: '/storage/getallstorage',
//url:'/product/getallcustomeraddress',
rownumbers: true,
data: $.extend(true, [], sdata),
idfield: 'addressid',
textfield: 'name',
columns: [[
{ field: 'addressid', hidden: true },
{ field: 'name', title: '库名' },
{ field: 'country', title: '国家' },
{ field: 'province', title: '省份' },
{ field: 'city', title: '市' },
{ field: 'area', title: '区' },
{ field: 'address', title: '详细地址' },
]],
loadfilter: function (sdata) {
if ($.isarray(sdata)) {
sdata = {
total: sdata.length,
rows: sdata
}
}
return sdata;
},
}
}
}
]],
onbeginedit: function (index, row) {
var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });
$(ed.target).combogrid('setvalue', { addressid: row.addressid, name: row.name });
},
onendedit: function (index, row) {
var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });
row.storage = $(ed.target).combogrid('gettext');
},
onclickrow: function (index, row) {//geteditor
var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });
if (ed != undefined) {
var s = row.storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].name) {
$(ed.target).combogrid('setvalue', sdata[i].addressid);
}
}
}
}
});
三、重头戏，也是我遇到的问题。
描述：我在datagrid中添加了下拉datagrid控件，当我第一次选中后，如果在去点击datagrid行，选中的下拉datagrid控件的值会被刷掉，这个问题确实困扰我很久，不过后来处理了，那种感觉也是无比的爽啊！
如上效果图，“所入仓库”一列，下拉是个datagrid，他的专业词汇叫“combogird”。就是这个玩意第一次选中没问题，第二次点击会把第一次选中的值刷掉。这也是一开始我对easyui的一个onclickrow事件不了解。
先来上我之前的错误代码：
onclickrow: function (index, row) {//geteditor
var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });
$(ed.target).combogrid('setvalue', row.name);
}
}
}
大家伙一定很苦恼这个row.name是个什么玩意？what？其实我一开始也不知道，因为这个是错误代码，我是病急乱投医，胡乱写的，哈哈，也不是胡乱写啦，因为我的下拉grid中有个字段是name，然而我把他混淆了，此row是指你点击的datagrid的row，而不是你数据源的row。我也是不断调试js看出来的端倪。我点击datagrid的时候，代码跳入onclickrow事件中，有句代码：“var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });”，然后发现ed为null, js抛异常，但是界面看不出来，只是把选中的数据刷掉了。找到问题后，还是不确定，代码修改完，再运行，正常显示，也不刷掉我选中的值。
正确代码如下：
onclickrow: function (index, row) {//geteditor
var ed = $(this).datagrid('geteditor', { index: index, field: 'storage' });
if (ed != undefined) {
var s = row.storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].name) {
$(ed.target).combogrid('setvalue', sdata[i].addressid);
}
}
}
}
一下是下拉grid的数据源
function synchroajaxbyurl(url) {
var temp;
$.ajax({
url: url,
async: false,
type: 'get',
datatype: "json",
success: function (data) {
temp = data;
}
});
return temp;
}
var sdata = synchroajaxbyurl('/product/getallcustomeraddress');
总结
以上所述是小编给大家介绍的easyui控件中的datagrid，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）
vue-axios系列:axios拦截器，配置请求头，配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论