Easy UI实现行内编辑

  最近跟着勇霞师姐做我们高校云平台的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>

    然后，就是编写js事件了。

    

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');
}

           在这里，我们需要注意的是添加和修改后的保存事件，他们响应的是同一个js方法，那就是onAfterEdit，那么在向Controller提交的时候就会出现问题，如何根据让两个不同的后台方法响应同一个事件呢？请看Controller的代码。

    二、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;
       }
   }

             从上面更新的方法可以看出，updateQueryProperty接收的是编辑行整行的数据，我们区分是编辑单元格还是编辑新添加的一行可以通过判断该编辑行的主键列是否为空值来得到结论，如果主键是空值，那个编辑行一定是新添加的一列，如果主键有值，那就就是在原来的单元格上的修改操作。

    下面是添加的操作：

    

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%了。