jQuery MiniUI 开发教程 CRUD之：单元格编辑（一）
CRUD之：单元格编辑
参考示例：单元格编辑
一：创建单元格编辑器
<divid="datagrid1"class="mini-datagrid"style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees"idField="id"
allowResize="true"pageSize="20"
allowCellEdit="true"allowCellSelect="true"multiSelect="true">
<divproperty="columns">
<divtype="checkcolumn"></div>
<divfield="loginname"width="120"headeralign="center"allowSort="true">员工帐号
<inputproperty="editor"class="mini-textbox"style="width:100%;"/>
</div>
<divfield="gender"width="100"renderer="onGenderRenderer"align="center"headeralign="center">性别
<inputproperty="editor"class="mini-combobox"style="width:100%;"data="Genders"/>
</div>
<divfield="age"width="100"allowSort="true">年龄
<inputproperty="editor"class="mini-spinner"minValue="0"maxValue="200"value="25"style="width:100%;"/>
</div>
<divfield="birthday"width="100"allowSort="true"dateFormat="yyyy-MM-dd">出生日期
<inputproperty="editor"class="mini-datepicker"style="width:100%;"/>
</div>
<divfield="remarks"width="120"headeralign="center"allowSort="true">备注
<inputproperty="editor"class="mini-textarea"style="width:100%;"minheight="80"/>
</div>
<divfield="createtime"width="100"headeralign="center"dateFormat="yyyy-MM-dd"allowSort="true">创建日期</div>
</div>
</div>
设置allowCellEdit和allowCellSelect后，表格为单元格编辑模式。
二：编辑操作
增加行：
functionaddRow(){
varnewRow={name:"NewRow"};
grid.addRow(newRow,0);
}
删除行：
functionremoveRow(){
varrows=grid.getSelecteds();
if(rows.length>0){
grid.removeRows(rows,true);
}
}
保存数据：
functionsaveData(){
//获得增加、删除、修改的记录集合
vardata=grid.getChanges();
varjson=mini.encode(data);
grid.loading("保存中，请稍后......");
$.ajax({
url:"../data/AjaxService.aspx?method=SaveChangedEmployees",
data:{data:json},
type:"post",
success:function(text){
grid.reload();
},
error:function(jqXHR,textStatus,errorThrown){
alert(jqXHR.responseText);
}
});
}
三：服务端处理
publicvoidSaveChangedEmployees()
{
Stringjson=Request["data"];
ArrayListrows=(ArrayList)PluSoft.Utils.JSON.Decode(json);
foreach(Hashtablerowinrows)
{
//根据记录状态，进行不同的增加、删除、修改操作
Stringstate=row["_state"]!=null?row["_state"].ToString():"";
if(state=="added")
{
row["createtime"]=DateTime.Now;
newTestDB().InsertEmployee(row);
}
elseif(state=="removed"||state=="deleted")
{
Stringid=row["id"].ToString();
newTestDB().DeleteEmployee(id);
}
elseif(state=="modified")
{
newTestDB().UpdateEmployee(row);
}
}
}