最近在研究jquery easyui的DataGrid，发现DataGrid中的下拉框无法绑定值，找了很久也没发现是具体问题所在，最后还是同事帮忙搞定的。具体问题竟然是jquery easyui提供的demo中的jquery版本有问题，还有就是绑定的json数据源要添加Method: "get"属性，要不然在C#中会有问题。
具体代码如下：
<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="css/demo.css" />
<script type="text/javascript"
src="jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
src="jquery/jquery.easyui.min.js"></script>
<body>
<h2>
Haven't finished tasks</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="Haven't finished tasks" style=" 1000px;
height: auto" data-options="
iconCls:
'icon-edit',
singleSelect: true,
url:
'datagrid_data1.json',
method:'get',
toolbar:
'#tb',
onClickRow:
onClickRow
">
<thead>
<tr>
<th
data-options="field:'taskid',60">
Task ID
</th>
<th
data-options="field:'taskcontent',500,editor:'text'">
Task Content
</th>
<th data-options="field:'projectid',150,
formatter:function(value,row){
return row.projectname;
},
editor:{
type:'combobox',
options:{
valueField:'projectid',
textField:'projectname',
url:'projects.json',
method:'get',
required:true
}
}">
Task Project
</th>
<th
data-options="field:'starttime',120,align:'center'">
Start Time
</th>
<th
data-options="field:'status',80,align:'center',editor:{type:'checkbox',options:{on:'',off:'P'}}">
Start Task
</th>
<th
data-options="field:'status',80,align:'center',editor:{type:'checkbox',options:{on:'',off:'P'}}">
Submit Task
</th>
</tr>
</thead>
</table>
<div id="tb" style="height:
auto">
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true"
onclick="append()">Append</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'icon-remove',plain:true"
onclick="removeit()">Remove</a>
</div>
<script
type="text/javascript">
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field:
'projectid' });
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['projectname'] =
productname;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow', { status: 'P' });
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit() {
if (editIndex == undefined) { return }
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
</script>
</body>