easyui datagrid中的 onClickCell 点击 带code和name的下拉框出现异常?求解
easyui datagrid中的 onClickCell 点击 带code和name的下拉框出现错误?求解
datagrid 使用的是onClickCell: onClickCell 单元格的点击事件
行中有一个下拉框字段是:有fCusCode和fCusName,显示的时候是fCusName,提交的时候是用fCusCode
参考了官网的代码,但他是在datagrid 使用的 onClickRow: onClickRow 事件,
以下是我的ednEditing代码,点击了下拉框后就提示错误了
“属性datagrid的值为null, 消息: 无法获取属性“target”的值: 对象为 null 或未定义”
想请问下使用onClickCell要怎么使用下拉框带code和name 的dataGrid 表格编辑啊?
------解决思路----------------------
没问题。。
datagrid 使用的是onClickCell: onClickCell 单元格的点击事件
行中有一个下拉框字段是:有fCusCode和fCusName,显示的时候是fCusName,提交的时候是用fCusCode
<th data-options="field:'fCusCode',width:80,align:'center',
formatter:function(value,row){
return row.fCusName;
},
editor:{
type:'combobox',
options:{
valueField:'fCusCode',
textField:'fCusName',
url:'ShipPlan.ashx?act=getCustomer'
}
}">结账单位</th>
参考了官网的代码,但他是在datagrid 使用的 onClickRow: onClickRow 事件,
以下是我的ednEditing代码,点击了下拉框后就提示错误了
“属性datagrid的值为null, 消息: 无法获取属性“target”的值: 对象为 null 或未定义”
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'fCusCode' });
var fCusName = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['fCusName'] = fCusName;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
想请问下使用onClickCell要怎么使用下拉框带code和name 的dataGrid 表格编辑啊?
------解决思路----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Cell Editing in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click a cell to start editing.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
url: 'datagrid_data1.json',
method:'get',
onClickCell: onClickCell
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text',editor:{
type:'combobox',
options:{
valueField:'value',
textField:'label',
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]
}
}">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'attr1' });
var fCusName = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['fCusName'] = fCusName;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
</script>
</body>
</html>
没问题。。