,,,,最近手头有个网络项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点,该项目中有个需求,需要在数据列表中直接编辑数据保存,行话叫做行内编辑。
,,在讲行内编辑之前,我们需要先了解如何使用EasyUi创建一个DataGrid,当然方式有很多(1. easyui.js,或者直接html代码加EasyUi的风格),我采用的是JS的方式:
上面是效果图,
Html代码如下:在页面定义一个表
& lt; !——数据展示——比;
& lt; div>
& lt;表id=" DataGridInbound "祝辞& lt;/table>
& lt;/div>
, Js代码如下:
,有几个我自己认为比较重要的属性在此标记下
url:这里是datagrid获取数据集的地址,就是你的行动,需要注意的是,你的行动需要返回Json格式的数据。
分页:设置datagrid是否分页显示
queryParams:你的查询条件参数
格式化程序:格式化,在日期列用到了,EasyUi的datagrid显示日期如果不格式话,日期会乱显示
这些属性在EasyUi的官网都有详细介绍,我就不深入解释了。
$ (" # DataGridInbound ") .datagrid ({
标题:“入库详情”,
idField:“Id”,
rownumbers:“真正的”,
url:“入站/GetPageInboundGoodsDetail”,
分页:真的,//表示在datagrid设置分页
rownumbers:没错,
singleSelect:没错,
条纹:没错,
nowrap:}真的,
可折叠:没错,
fitColumns:没错,
remoteSort:假的,
loadMsg:“正在努力加载数据,请稍后…”,
queryParams: {ProductName:“”,状态:“”,SqNo: "},
祝辞& lt; h2>暂无数据& lt;/h2> & lt;/td> & lt;/tr>”);
(美元).closest (div.datagrid-wrap); (div.datagrid-pager) hide ();
}//如果通过调用重载方法重新加载数据有数据时显示出分页导航容器
其他美元(这).closest (div.datagrid-wrap); (div.datagrid-pager),告诉();
},
列:[[
{:ck,复选框:真},
{字段:“Id”,隐藏的:“真正的”},
{字段:“InBoundId”,隐藏的:“真正的”},
{字段:“ProductId”,隐藏的:“真正的”},
{字段:“ProductTypeId”,隐藏的:“真正的”},
{字段:“SqNo”,标题:“入库参考号”,宽度:“100”,对齐:‘左’,可分类的:真正的},
{
字段:“地位”,标题:“状态的,宽度:“100”,对齐:‘左’,可分类的:真的,
格式化程序:功能(价值、索引行){
如果https://www.yisu.com/zixun/=(value=" 1 ") {
返回的& lt;跨祝辞已入库& lt;/span>”;
}
else if (value=https://www.yisu.com/zixun/=" 1 ") {
返回的& lt;跨在待入库& lt;/span>”;
}
}
},
{
字段:“InboundDate”,标题:“入库日期”,宽度:“100”,对齐:‘左’,可分类的:真的,
格式化程序:函数(日期){/. * \ var pa=((. *) \)/;
var unixtime=date.match (pa) [1]。substring (0, 10);//通过正则表达式来获取到时间戳的字符串
返回取得时间(unixtime);
}
},
{:ProductName,标题:“产品名称”,宽度:“100”,对齐:‘左’,可分类的:真正的},
{字段:“ProductType”,标题:“产品类型的,宽度:100年,对齐:‘左’,可分类的:真正的},
{字段:“Num”,标题:“数量的,宽度:100年,对齐:‘左’,可分类的:真正的},
{字段:“存储”,标题:“所属仓库”,宽度:100年,对齐:‘左’,可分类的:真正的},
{字段:“CompanyCode”,标题:“所属公司”,宽度:100年,对齐:‘左’,可分类的:真正的},
{字段:“CreateBy”,标题:“操作人”,宽度:“100”,对齐:‘左’,可分类的:真正的},
]],
});
如上效果图,我们在DataGrid行内直接变数据
Js代码如下:
如何实现行内编辑,需要在你所编辑的单元格中加入编辑属性,编辑器属性有个类型(他支持很多控件类型,可以到官网查看)就是编辑的控件类型。
比如说,上图中“入库状态”,首先我们定义数据源,json格式是重点。
var InboundStatus=[{“价值”:“1”,“文本”:“入库”},{“价值”:“1”,“文本”:“待入库"});
然后需要格式转换函数,不然你选择的时候只会显示值值,不是显示文本值。代码如下:
构成了rowData,函数unitformatter(价值,rowIndex) {
如果https://www.yisu.com/zixun/=(值=0){
返回;
}
(var=0;我
