easyui可编辑表格编辑器设置值
假设有这样的场景，使用easyUI的可编辑表格时，有些内容是通过其中一个编辑器编辑完后到后台取数据，返回数据后插入到部分编辑器中，为编辑器设置值可以用以下的方法
function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){
//gridID 是表格的ID，rowIndex是当前编辑行的索引，fieldArr是要插入值的字段数组，rowData是要插入的数据（json对象），focusField是插入数据后，焦点在哪个字段上
var editors = $("#"+gridID).datagrid("getEditors",rowIndex),
editorLength = editors.length;
for(var j=0; j<fieldArr.length; j++){
for(var i=0; i<editorLength; i++){
var ed = editors[i];
if(ed.field == fieldArr[j]){
$(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]);
}else if(ed.field == focusField){
$(ed.target.siblings("span").children("input")).focus();
}
}
}
$("#"+gridID).datagrid('clearSelections');
}完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可编辑表格编辑器设置值</title>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
<script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css"> /** * 解决在编辑时看不到内容的问题，这是由于使用easyUI的bootstrap主题导致的 */ .datagrid-row.datagrid-row-editing.datagrid-row-selected{ background: #F3F3F3; color: #333333; } </style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<table id="editorEventGrid" style="width: 100%;height: 400px;"></table>
<div id="gridToolbar" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<a class="btn btn-sm btn-primary pull-right" onclick="addRow()">增加</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> var userData = [ {"uid":1,"username":"张三","age":20,"sex":0,"cell":"13076847475","birthday":"1990-01-01"}, {"uid":2,"username":"李四","age":30,"sex":1,"cell":"15876847478","birthday":"1990-02-02"}, {"uid":3,"username":"王五","age":40,"sex":0,"cell":"18976847479","birthday":"1990-03-03"} ] $(function(){ var rowEditingIndex=0; $("#editorEventGrid").edatagrid({ singleSelect:true, striped:true, nowrap:true, fitColumns:true, loadMsg:"加载数据中...", pagination:true, pageNumber:1, pageSize:30, pageList:[30,40,50], toolbar:"#gridToolbar", columns:[[ {field:'uid',title:'姓名',width:80,formatter:function(value,row,index){return row.username},editor:{type:'combobox',options:{ required:true, textField:'name', valueField:'uid', selectOnNavigation:false, data:[ {name:"张三",uid:1}, {name:'李四',uid:2}, {name:'王五',uid:3}, {name:'王老五',uid:4} ], onChange:function(n,o){ if(n){ //正常情况下，应该到后台获取数据 var obj = getObj(n); if(obj){ setGridFieldsValue("editorEventGrid",rowEditingIndex,["age","sex","cell","birthday"],obj,"address"); } } } }}}, {field:'age',title:'年龄',width:40,align:'right',editor:'numberbox'}, {field:'sex',title:'性别',width:40,formatter:function(value,row,index){return row.sexName},editor:{type:'combobox',options:{ textField:'text', valueField:'value', data:[ {text:"男",value:0}, {text:"女",value:1} ] }}}, {field:'cell',title:'手机',width:80,align:'center',editor:{type:'numberbox',options:{required:true}}}, {field:'address',title:'地址',width:150,editor:{type:"textbox",options:{required:true}}}, {field:'birthday',title:'生日',width:60,align:'center',editor:'datebox'} ]], onAdd:function(index,row){ rowEditingIndex = index; //添加行时，让第一个编辑器获取焦点 $(".datagrid-row-editing .textbox-text")[0].focus(); //为编辑器添加键盘事件 var editors = $("#editorEventGrid").edatagrid("getEditors",index); for(var i=0; i<editors.length; i++){ var editor = editors[i]; $(editor.target.siblings("span").children("input")).on("keydown",function(e){ var code = e.keyCode || e.which; if(code == 13){//13是回车键 addRow(); }else if(code == 38){//38是方向↑键 cancelRow(); } }); } }, onEndEdit:endEditing }) }); function addRow(){ $("#editorEventGrid").edatagrid("addRow"); } function cancelRow(){ $("#editorEventGrid").edatagrid("cancelRow"); } function endEditing(index,row){ var ed = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'uid'}); var ed2 = $("#editorEventGrid").edatagrid("getEditor",{index:index,field:'sex'}); row.username = $(ed.target).combobox("getText"); row.sexName = $(ed2.target).combobox("getText"); } function setGridFieldsValue(gridID,rowIndex,fieldArr,rowData,focusField){ //gridID 是表格的ID，rowIndex是当前编辑行的索引，fieldArr是要插入值的字段数组，rowData是要插入的数据（json对象），focusField是插入数据后，焦点在哪个字段上 var editors = $("#"+gridID).datagrid("getEditors",rowIndex), editorLength = editors.length; for(var j=0; j<fieldArr.length; j++){ for(var i=0; i<editorLength; i++){ var ed = editors[i]; if(ed.field == fieldArr[j]){ $(ed.target)[ed.type]("setValue",rowData[fieldArr[j]]); }else if(ed.field == focusField){ $(ed.target.siblings("span").children("input")).focus(); } } } } function getObj(uid){ for(var i=0; i<userData.length; i++){ if(userData[i].uid == uid){ return userData[i] } } } </script>
</body>
</html>