EasyUI-datagrid可编辑

最新推荐文章于 2023-07-19 11:27:16 发布

ss_isStudying

最新推荐文章于 2023-07-19 11:27:16 发布

阅读量3.2k

点赞数 1

分类专栏： js插件

本文链接：https://blog.csdn.net/Jason_ss/article/details/88287892

版权

本文详细介绍了如何使用EasyUI实现datagrid表格的可编辑功能，包括HTML表格的设置、Java数据列表的初始化、年度下拉框的填充、datagrid的初始化以及编辑时的数据验证。同时，还探讨了如何在输入框点击保存后将数据转化为文字，并限制输入框只能输入数字和小数点。

摘要由CSDN通过智能技术生成

记录第一次使用EasyUI可编辑输入框

1.HTML中table

<td class="panel-body" align="left">
    <table id="tt" style="width: 100%;">
    <div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-         add',plain:true" onclick="insert()">新增</a>
    </div>
</td>

2.初始化表格list是Java传递来的list

初始化年度下拉框yeardata：

var yeardata = [];//创建年度数组
	var thisYear=new Date().getUTCFullYear();//今年
	var endYear=thisYear+1;//结束年份
	for(var startYear=2014;startYear<=thisYear;startYear++){ 
		yeardata.push({"yeartime":startYear});
	};

初始化datagrid

//初始化
function doInitList(list){
		$("#tt").datagrid({
			width:'100%',
			height:'auto',
			singleSelect:true,
			idField:'itemid',
			data:list,
			columns:[[
				{field:'yeartime',title:'年度',width:'25%',align:'center',
					formatter:function(value){
						for(var i=0; i<yeardata.length; i++){
							if (yeardata[i].yeartime == value) return yeardata[i].yeartime;
						}
						return value;
					},
					editor:{
						type:'combobox',
						options:{
							valueField:'yeartime',
							textField:'yeartime',
							data:yeardata,
							required:true,
							missingMessage:"请输入年度下拉框"
						}
					}
				},
				{field:'amount',title:'年度代偿金额',width:'25%',align:'cente