EasyUI-datagrid可编辑

最新推荐文章于 2020-11-11 12:22:13 发布

ss_isStudying

最新推荐文章于 2020-11-11 12:22:13 发布

阅读量3.2k

点赞数 1

分类专栏： js插件

本文链接：https://blog.youkuaiyun.com/Jason_ss/article/details/88287892

版权

js插件专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录第一次使用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:'center',editor:{type:'numberbox',options:{precision:2,required:true,missingMessage:"请输入年度代偿金额"}}},
				{field:'num',title:'年度代偿笔数',width:'25%',align:'center',editor:{type:'numberbox',options:{required:true,missingMessage:"请输入年度代偿笔数"}}},
				{field:'action',title:'操作',width:'25%',align:'center',
					formatter:function(value,row,index){
						if (row.editing){
							var s = '<a href="#" onclick="saverow(this)">保存</a> ';
							var c = '<a href="#" onclick="cancelrow(this)">取消</a>';
							return s+c;
						} else {
							var e = '<a href="#" onclick="editrow(this)">编辑</a> ';
							var d = '<a href="#" onclick="deleterow(this)">删除</a>';
							return e+d;
						}
					}
				}
			]],
			onBeforeEdit:function(index,row){ 
				row.editing = true;
				updateActions(index);
			},
			onAfterEdit:function(index,row){
				row.editing = false;
				updateActions(index,row);
			},
			onCancelEdit:function(index,row){
				row.editing = false;
				updateActions(index);
			}
		});
	}

//改变事件
function updateActions(index,row){
		$('#tt').datagrid('updateRow',{
			index: index,
			row:{}
		});
		if(row!=""&&row!=undefined&&row!=null){
            //row当前行的数据--调用接口传递数据
			doAdd(row);
		}
	}
//获取行
	function getRowIndex(target){
		var tr = $(target).closest('tr.datagrid-row');
		return parseInt(tr.attr('datagrid-row-index'));
	}
//编辑行
	function editrow(target){
		$('#tt').datagrid('beginEdit', getRowIndex(target));
	}
//删除行
	function deleterow(target){
		$("#tt").datagrid('selectRow', getRowIndex(target));
		var row = $("#tt").datagrid("getSelected");
		$.messager.confirm('Confirm','确定删除?',function(r){
			if (r){
				$('#tt').datagrid('deleteRow', getRowIndex(target));
                //删除接口
				deleteRow(row);
			}
		});
	}
//保存
	function saverow(target){
		$('#tt').datagrid('endEdit', getRowIndex(target));
	}
//取消操作
	function cancelrow(target){
		$('#tt').datagrid('cancelEdit', getRowIndex(target));
        //初始化
		doInitData();
	}
//新增行--设置新增在第一行
	function insert(){
		$('#tt').datagrid('insertRow', {
			index: 0,
			row:{
			}
		});
		$('#tt').datagrid('selectRow',0);
		$('#tt').datagrid('beginEdit',0);
	}

3.其他方法绑定数据到库

/**
	 * 添加。
	 */
	function doAdd(data,type)
	{
		//返回值。
		var returnValue = {};
		var requestData = DataForm.collectData();
		requestData.type = type;
		requestData.data = data;
		requestData.sid = "managePlatformTransactionRecodeService:addRapayInfo";
		ajaxBase.syncCall
		(
			requestData,
			function(data, textStatus, jqXHR)
		    {
		    	returnValue = data;
		    	doInitData();
		    	var replyMsg = data["replyMsg"];
				EasyUI.tipMessage(replyMsg, "提示");
		    },
			function(jqXHR, textStatus, errorThrown)
		    {
		    	returnValue = Constants.RESULT_FAILURE_JSON;
		    	var replyMsg = data["replyMsg"];
				EasyUI.tipMessage(replyMsg, "提示");
		    }
		 );
		return returnValue;
	}
	
	function deleteRow(row){
		var returnValue = {};
		var requestData = row;
		requestData.sid = "managePlatformTransactionRecodeService:deleteRapayInfo";
		ajaxBase.syncCall
		(
			requestData,
			function(data, textStatus, jqXHR)
		    {
		    	returnValue = data;
		    	doInitData();
		    },
			function(jqXHR, textStatus, errorThrown)
		    {
		    	returnValue = Constants.RESULT_FAILURE_JSON;
		    }
		);
		return returnValue;
	}

4.小结：

设置编辑时不可为空：required=true ，missingMessage=为空时自定义错误提示

editor:{type:'numberbox',options:{precision:2,required:true,missingMessage:"请输入年度代偿金额"}}

5.input输入框点击保存为文字，点击编辑为输入框

（1）input输入框

<tr >
<td width="25%" style="padding: 8px;" align="center">累积代偿金额：</td>
<td width="25%">
<span id="allRepayAmount"  width="25%">
<input type="text" id="allRepayAmount_in" pattern="[0-9]+(.[0-9]{2})?" onkeyup="patternNum(this)"  name="allRepayAmount" tips="累积代偿金额"  class="textbox ui-component-small" style="width:55%;" nullable="false" />
</span>
<span>元</span>
<a id="allAmount" href="javascript:void(0);" onclick="editfun('allRepayAmount','0','allAmount','1');">保存</a>
</td>
</tr>

（2）转换方法

function editfun(id,status,editid,type){
	if(status == 1){//编辑
		var value = $("#"+id).text();
		document.getElementById(id).innerHTML = '<input type="text" pattern="[0-9]+(.[0-9]{2})?" onkeyup="patternNum(this)"   id="'+id+'_in" value="'+value+'" class="textbox ui-component-small" style="width:70%;" nullable="false" />';
		$("#"+editid).text("保存");			  
        $("#"+editid).attr("onclick","editfun(\""+id+"\",0,\""+editid+"\",\""+type+"\");");
  }else{//保存
      var value = $("#"+id).find("input").val();
      if($.isEmptyObject(value)){
        	EasyUI.tip(id+"_in","请填写内容", "2");
        	return;
      }
      document.getElementById(id).innerHTML= value;
      $("#"+editid).text("编辑");
      $("#"+editid).attr("onclick","editfun(\""+id+"\",1,\""+editid+"\",\""+type+"\");");
        	doAdd(value,type);
      }
	  DataForm.setRequiredFieldsBackgroundColor();//非空项提示
}

（3）限制输入框只能输入数字和小数点

function patternNum(obj){
		obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
	    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
	    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
	    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
	    if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
	        obj.value= parseFloat(obj.value); 
	    } 
	}