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