最近跟着勇霞师姐做我们高校云平台的UI系统，各个系统界面的管理。UI的系统虽然很小，但是技术内容很新鲜，这篇博文就像大家介绍一下我新接触的EasyUI的知识：开启行内编辑。
效果图如下：
一、View页面
首先，引入easyui的js文件。
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/demo/demo.css">
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<link href="../../CSS/index.css" rel="stylesheet" />
其次，是对工具栏和表单的设置。
<div id="ContentAreas">
<div class="easyui-panel" title="查询页面属性" >
<div id="buttonAreas" style="margin-left: 10px; margin-top: 10px;">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="append()">添加</a>
<a href="javascript:void(0)" id="edit" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="accept() " >保存</a>
<a href="#" id="lostFocus" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destory()">删除</a>
</div>
<div id="tt" >
<table id="dg" class="easyui-datagrid"
data-options="rownumbers:true,
fitColumns:true,
url:'/Properties/QueryData',
pagination:true,
singleSelect:false,
onClickCell: onClickCell,onAfterEdit: onAfterEdit">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true,align:'center'"></th>
<th data-options="field:'QueryId',align:'center',hidden:'true'"></th>
<th data-options="field:'EntityName',align:'center',sortable:true,
formatter:function(value,row){
return row.EntityName;
},
editor:{
type:'combobox',
options:{
valueField:'EntityName',
textField:'EntityName',
method:'get',
url:'/NonQueryProperties/QueryEntity',
required:true,
onSelect: function(rec){
showEntityDesc(rec.EntityDesc);
}
}
},sortable:true">实体名称</th>
<th id='aaa' data-options="field:'EntityDesc',align:'center',editor:'text'">实体描述</th>
<th data-options="field:'PropertyName',align:'center',editor:'text',sortable:true">属性名称</th>
<th data-options="field:'PropertyDesc',align:'center',editor:{type:'text',options:{required:true}}">属性描述</th>
<th data-options="field:'IsShow',align:'center',editor:{type:'checkbox',options:{on:'Y',off:'N'}},sortable:true">是否显</th>
<th data-options="field:'IsCondition',align:'center',editor:{type:'checkbox',options:{on:'Y',off:'N'}}">查询条件</th>
<th data-options="field:'PropertyOrder',align:'center',editor:'text',sortable:true">显示顺序</th>
<th data-options="field:'ControlId',align:'center',
formatter:function(value,row){
return row.ControlDesc;
},
editor:{
type:'combobox',
options:{
valueField:'ControlId',
textField:'ControlDesc',
method:'get',
url:'/Controls/QueryAllControls',
required:true
}
}">控件类型</th>
<th data-options="field:'ControlHtmlName',align:'center',editor:'text'">控件HtmlName</th>
<th data-options="field:'ControlHtmlId',align:'center',editor:'text'">控件HtmlId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
var editIndex = undefined;//定义编辑列的索引
function endEditing() {//判断是否处于编辑状态
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//1.0单击单元格的时候触发
function onClickCell(index, field) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('editCell', { index: index, field: field });
editIndex = index;
}
}
//2.0根据类型选择条件进行查询
function doSearch() {
//查询参数直接添加在queryParams中
var searchName = $('#txtSearch').val();
$('#dg').datagrid('reload', {//重新加载表信息datagrid
strCondition: searchName //参数名称
});
}
// 根据类型选择条件进行查询
function entitySearch(entityId) {
$('#dg').datagrid('reload', {//重新加载表信息datagrid
strCondition: entityId //参数名称
});
}
//3.0向后台提交数据，包括添加和修改
function onAfterEdit(index, row，value) {
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
var controlId = row.ControlId;
//获得隐藏的GUID列
var queryId = row.QueryId;
var entityName = row.EntityName;
//alert(entityName);
var enQueryProperties = JSON.stringify(row);
if (row.IsShow == 'N' && row.isCondition == 'Y') {
alert("查询条件必须显示到前台页面");
//重新加载表格数据
$('#dg').datagrid('reload');
}
else {
$.ajax(
{
url: '/Properties/updateQueryProperty',//向后台提交数据
type: "post",
async: true,
dataType: 'json',
data: { 'enQueryProperties': enQueryProperties'},
success: function (data) {
if (data == 'true') {
alert("更新成功！");
}
}
}
);
}
}
//4.0添加按钮，同时怎加隐藏的GUID列
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow', { QueryId: '' });
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
//5.0删除事件
function remove() {
if (editIndex == undefined) { return }
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept() {
$('#dg').datagrid('acceptChanges');
}
二、Controller页面
首先，先看修改后更新的方法。
public Boolean updateQueryProperty(string enQueryProperties)
{
#region 定义变量
//获取查询属性实体的json
string json = Request.Params["enQueryProperties"].ToString();
//获取属性对应的控件实体
string strControlId = Request.Params["ControlId"].ToString();
//获取记录对应的ID
string strQueryId = Request.Params["QueryId"].ToString();
#endregion
#region 反序列化 查询属性实体的json 为属性实体
//反序列化 查询属性实体的json 为属性实体
QueryPropertiesViewModel enQueryPropertiesViewModel = (QueryPropertiesViewModel)JsonConvert.DeserializeObject(json, typeof(QueryPropertiesViewModel));
#endregion
#region 取控件的值
//根据控件ID查询控件实体
ControlsViewModel enControlViewModel = controlWCF.QueryControlByID(strControlId);
//给属性实体的控件属性赋值
//enQueryPropertiesViewModel.Controls = enControlViewModel;
enQueryPropertiesViewModel.ControlsControlId = enControlViewModel.ControlId;
#endregion 取控件的
//判断strQueryId如果有值，则为修改实体
if (strQueryId != "")
{
//定义更新标签
Boolean queryIsUpdate = false;
//调用wcf 接口，更新查询属性实体
try
{
//更新查询属性实体
queryIsUpdate = queryPropertiesServiceWCF.UpdateQueryProperties(enQueryPropertiesViewModel);
if (!queryIsUpdate)
{
Exception e = new Exception("更新失败！");
}
return true;
}
catch (Exception e)
{
throw new Exception("更新失败!");
}
}else<span style="font-family: KaiTi_GB2312;">{</span>//如果strQueryId为空值，则说明是添加实体
//为GUID主键赋值
enQueryPropertiesViewModel.QueryId = Guid.NewGuid().ToString();
AddEntity(enQueryPropertiesViewModel);//执行添加操作
return true;
}
}下面是添加的操作：
public bool AddEntity(QueryPropertiesViewModel queryViewModel)
{
bool addIdSuccess = false;
try
{
queryViewModel.QueryId = Guid.NewGuid().ToString();
queryViewModel.ControlHtmlId = queryViewModel.PropertyName;
queryViewModel.ControlHtmlName = queryViewModel.PropertyName;
if (queryPropertiesServiceWCF.AddQueryPropertiesy(queryViewModel)!=null)
{
addIdSuccess = true;
}
}
catch (Exception e)
{
throw e;
}
return addIdSuccess;
}至此，便完美收工了。
总结：对行内编辑的EasyUI一直很感兴趣，这次终于是接触到了，很开心；但是中间的添加和修改两个事件着实困惑了我好几天的时间，刚开始是理不清思路，因为我们的代码是从师姐那里拷过来的，就顺着她的思路往下走，把自己给绕了进去。后来还是打算自己从头把这里块知识理清楚，找来了行内编辑的EasyUI的Demo，用FireBug一步一步的调试，然后再某个即将入眠的晚上，终于茅塞顿开了。这还是说明那个问题，编程思路真的很重要，有了清晰的逻辑思路，你的工作就完成90%了。
原文：http://blog.csdn.net/zjx86320/article/details/43340725