虽然没有注释，但是勉=仔细看看还是可以的

效果图如下：

一、View页面

首先，引入easyui的js文件。

[html] view plain copy

  1. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">
  3. <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/demo/demo.css">
  4. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
  6. <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
  7. <link href="../../CSS/index.css" rel="stylesheet" />

其次，是对工具栏和表单的设置。

[html] view plain copy

  1. <div id="ContentAreas">
  2. <div class="easyui-panel" title="查询页面属性" >
  3. <div id="buttonAreas" style="margin-left: 10px; margin-top: 10px;">
  4. <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="append()">添加</a>
  5. <a href="javascript:void(0)" id="edit" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="accept() " >保存</a>
  6. <a href="#" id="lostFocus" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destory()">删除</a>
  7. </div>
  8. <div id="tt" >
  9. <table id="dg" class="easyui-datagrid"
  10. data-options="rownumbers:true,
  11. fitColumns:true,
  12. url:‘/Properties/QueryData‘,
  13. pagination:true,
  14. singleSelect:false,
  15. onClickCell: onClickCell,onAfterEdit: onAfterEdit">
  16. <thead>
  17. <tr>
  18. <th data-options="field:‘ck‘,checkbox:true,align:‘center‘"></th>
  19. <th data-options="field:‘QueryId‘,align:‘center‘,hidden:‘true‘"></th>
  20. <th data-options="field:‘EntityName‘,align:‘center‘,sortable:true,
  21. formatter:function(value,row){
  22. return row.EntityName;
  23. },
  24. editor:{
  25. type:‘combobox‘,
  26. options:{
  27. valueField:‘EntityName‘,
  28. textField:‘EntityName‘,
  29. method:‘get‘,
  30. url:‘/NonQueryProperties/QueryEntity‘,
  31. required:true,
  32. onSelect: function(rec){
  33. showEntityDesc(rec.EntityDesc);
  34. }
  35. }
  36. },sortable:true">实体名称</th>
  37. <th id=‘aaa‘ data-options="field:‘EntityDesc‘,align:‘center‘,editor:‘text‘">实体描述</th>
  38. <th data-options="field:‘PropertyName‘,align:‘center‘,editor:‘text‘,sortable:true">属性名称</th>
  39. <th data-options="field:‘PropertyDesc‘,align:‘center‘,editor:{type:‘text‘,options:{required:true}}">属性描述</th>
  40. <th data-options="field:‘IsShow‘,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘Y‘,off:‘N‘}},sortable:true">是否显</th>
  41. <th data-options="field:‘IsCondition‘,align:‘center‘,editor:{type:‘checkbox‘,options:{on:‘Y‘,off:‘N‘}}">查询条件</th>
  42. <th data-options="field:‘PropertyOrder‘,align:‘center‘,editor:‘text‘,sortable:true">显示顺序</th>
  43. <th data-options="field:‘ControlId‘,align:‘center‘,
  44. formatter:function(value,row){
  45. return row.ControlDesc;
  46. },
  47. editor:{
  48. type:‘combobox‘,
  49. options:{
  50. valueField:‘ControlId‘,
  51. textField:‘ControlDesc‘,
  52. method:‘get‘,
  53. url:‘/Controls/QueryAllControls‘,
  54. required:true
  55. }
  56. }">控件类型</th>
  57. <th data-options="field:‘ControlHtmlName‘,align:‘center‘,editor:‘text‘">控件HtmlName</th>
  58. <th data-options="field:‘ControlHtmlId‘,align:‘center‘,editor:‘text‘">控件HtmlId</th>
  59. </tr>
  60. </thead>
  61. </table>
  62. </div>
  63. </div>
  64. </div>

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

[javascript] view plain copy

  1. var editIndex = undefined;//定义编辑列的索引
  2. function endEditing() {//判断是否处于编辑状态
  3. if (editIndex == undefined) { return true }
  4. if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)) {
  5. $(‘#dg‘).datagrid(‘endEdit‘, editIndex);
  6. editIndex = undefined;
  7. return true;
  8. } else {
  9. return false;
  10. }
  11. }
  12. //1.0单击单元格的时候触发
  13. function onClickCell(index, field) {
  14. if (endEditing()) {
  15. $(‘#dg‘).datagrid(‘selectRow‘, index)
  16. .datagrid(‘editCell‘, { index: index, field: field });
  17. editIndex = index;
  18. }
  19. }
  20. //2.0根据类型选择条件进行查询
  21. function doSearch() {
  22. //查询参数直接添加在queryParams中
  23. var searchName = $(‘#txtSearch‘).val();
  24. $(‘#dg‘).datagrid(‘reload‘, {//重新加载表信息datagrid
  25. strCondition: searchName  //参数名称
  26. });
  27. }
  28. //  根据类型选择条件进行查询
  29. function entitySearch(entityId) {
  30. $(‘#dg‘).datagrid(‘reload‘, {//重新加载表信息datagrid
  31. strCondition: entityId  //参数名称
  32. });
  33. }
  34. //3.0向后台提交数据，包括添加和修改
  35. function onAfterEdit(index, row，value) {
  36. var fields = $(this).datagrid(‘getColumnFields‘, true).concat($(this).datagrid(‘getColumnFields‘));
  37. var controlId = row.ControlId;
  38. //获得隐藏的GUID列
  39. var queryId = row.QueryId;
  40. var entityName = row.EntityName;
  41. //alert(entityName);
  42. var enQueryProperties = JSON.stringify(row);
  43. if (row.IsShow == ‘N‘ && row.isCondition == ‘Y‘) {
  44. alert("查询条件必须显示到前台页面");
  45. //重新加载表格数据
  46. $(‘#dg‘).datagrid(‘reload‘);
  47. }
  48. else {
  49. $.ajax(
  50. {
  51. url: ‘/Properties/updateQueryProperty‘,//向后台提交数据
  52. type: "post",
  53. async: true,
  54. dataType: ‘json‘,
  55. data: { ‘enQueryProperties‘: enQueryProperties‘},
  56. success: function (data) {
  57. if (data == ‘true‘) {
  58. alert("更新成功！");
  59. }
  60. }
  61. }
  62. );
  63. }
  64. }
  65. //4.0添加按钮，同时怎加隐藏的GUID列
  66. function append() {
  67. if (endEditing()) {
  68. $(‘#dg‘).datagrid(‘appendRow‘, { QueryId: ‘‘ });
  69. editIndex = $(‘#dg‘).datagrid(‘getRows‘).length - 1;
  70. $(‘#dg‘).datagrid(‘selectRow‘, editIndex)
  71. .datagrid(‘beginEdit‘, editIndex);
  72. }
  73. }
  74. //5.0删除事件
  75. function remove() {
  76. if (editIndex == undefined) { return }
  77. $(‘#dg‘).datagrid(‘cancelEdit‘, editIndex)
  78. .datagrid(‘deleteRow‘, editIndex);
  79. editIndex = undefined;
  80. }
  81. function accept() {
  82. $(‘#dg‘).datagrid(‘acceptChanges‘);
  83. }

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

二、Controller页面

首先，先看修改后更新的方法。

[csharp] view plain copy

  1. public Boolean updateQueryProperty(string enQueryProperties)
  2. {
  3. #region 定义变量
  4. //获取查询属性实体的json
  5. string json = Request.Params["enQueryProperties"].ToString();
  6. //获取属性对应的控件实体
  7. string strControlId = Request.Params["ControlId"].ToString();
  8. //获取记录对应的ID
  9. string strQueryId = Request.Params["QueryId"].ToString();
  10. #endregion
  11. #region 反序列化 查询属性实体的json 为属性实体
  12. //反序列化 查询属性实体的json 为属性实体
  13. QueryPropertiesViewModel enQueryPropertiesViewModel = (QueryPropertiesViewModel)JsonConvert.DeserializeObject(json, typeof(QueryPropertiesViewModel));
  14. #endregion
  15. #region 取控件的值
  16. //根据控件ID查询控件实体
  17. ControlsViewModel enControlViewModel = controlWCF.QueryControlByID(strControlId);
  18. //给属性实体的控件属性赋值
  19. //enQueryPropertiesViewModel.Controls = enControlViewModel;
  20. enQueryPropertiesViewModel.ControlsControlId = enControlViewModel.ControlId;
  21. #endregion 取控件的
  22. //判断strQueryId如果有值，则为修改实体
  23. if (strQueryId != "")
  24. {
  25. //定义更新标签
  26. Boolean queryIsUpdate = false;
  27. //调用wcf 接口，更新查询属性实体
  28. try
  29. {
  30. //更新查询属性实体
  31. queryIsUpdate = queryPropertiesServiceWCF.UpdateQueryProperties(enQueryPropertiesViewModel);
  32. if (!queryIsUpdate)
  33. {
  34. Exception e = new Exception("更新失败！");
  35. }
  36. return true;
  37. }
  38. catch (Exception e)
  39. {
  40. throw new Exception("更新失败!");
  41. }
  42. }else<span style="font-family: KaiTi_GB2312;">{</span>//如果strQueryId为空值，则说明是添加实体
  43. //为GUID主键赋值
  44. enQueryPropertiesViewModel.QueryId = Guid.NewGuid().ToString();
  45. AddEntity(enQueryPropertiesViewModel);//执行添加操作
  46. return true;
  47. }
  48. }

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

下面是添加的操作：

[csharp] view plain copy

  1. public bool AddEntity(QueryPropertiesViewModel queryViewModel)
  2. {
  3. bool addIdSuccess = false;
  4. try
  5. {
  6. queryViewModel.QueryId = Guid.NewGuid().ToString();
  7. queryViewModel.ControlHtmlId = queryViewModel.PropertyName;
  8. queryViewModel.ControlHtmlName = queryViewModel.PropertyName;
  9. if (queryPropertiesServiceWCF.AddQueryPropertiesy(queryViewModel)!=null)
  10. {
  11. addIdSuccess = true;
  12. }
  13. }
  14. catch (Exception e)
  15. {
  16. throw e;
  17. }
  18. return addIdSuccess;
  19. }

至此，便完美收工了。

总结：对行内编辑的EasyUI一直很感兴趣，这次终于是接触到了，很开心；但是中间的添加和修改两个事件着实困惑了我好几天的时间，刚开始是理不清思路，因为我们的代码是从师姐那里拷过来的，就顺着她的思路往下走，把自己给绕了进去。后来还是打算自己从头把这里块知识理清楚，找来了行内编辑的EasyUI的Demo，用FireBug一步一步的调试，然后再某个即将入眠的晚上，终于茅塞顿开了。这还是说明那个问题，编程思路真的很重要，有了清晰的逻辑思路，你的工作就完成90%了。

时间： 2024-04-21 16:27:49

虽然没有注释，但是勉=仔细看看还是可以的的相关文章

看文档要看仔细，英语要加强啊... cocos2d-x 的 API 和 对应版本的 cocos2d-js 的 API 没有完全对应

/** * Sets the X rotation (angle) of the node in degrees which performs a horizontal rotational skew. * * The difference between `setRotationalSkew()` and `setSkew()` is that the first one simulate Flash's skew functionality, * while the second one u

Delphi Android程序启动过程

Delphi的Android程序是原生的程序,也就是NativeActivity.那么就需要先看一下NativeActivity的原理, 在AndroidManifest.xml文件里面指定入口activity为nativeactivity,这样应用程序一启动,java虚拟机这边就开一个主线程,主线程创建一个活动,就是nativeactivity,这个nativeactivity在创建的过程中就会去应用程序的.so动态链接库中寻找一个函数: __ANativeActivity_onCreate(

栈和队列的面试题Java实现

栈和队列的面试题Java实现 二.栈和队列: 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min()的栈,要求min.push.pop.的时间复杂度都是O(1) (6)判断栈的push和pop序列是否一致 1.栈的创建: 我们接下来通过链表的形式来创建栈,方便扩充. 代码实现: 1 public class Stack { 2 3 public Node he

发布两款JQ小插件（图片查看器 + 分类选择器），开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

WIN10+UBUNTU15.04 kylin （EFI+GPT）

首先,恭喜自己经过两天的辛苦努力终于完成双系统的安装,一般新购买的电脑预装win8,都是采用EFI+GPT方式,而网上的很多教程都是bios+mrt下安装双系统,什么easybcd... balabala 都用不上,反而给我这种有完美倾向的小白带来了很多苦恼. 本人电脑:hp-pavilion-m4-1009tx(UEFI+GPT),预装win8,已经升级到win10, 由于应用软件需要linux环境,拟定装双系统(win10+ubuntu) 作者是(UEFI+GPT)小白,只能在网上搜索大神文

C语言之实现函数返回一个数组，以及选择排序，还有折半查找。这是同学的一个作业。。。

作业的具体要求如下: 编写一个完整的程序,实现如下功能.(1)    输入10个无序的整数.(2)    用选择排序法将以上接收的10个无序整数按从大到小的顺序排序.(3)    要求任意输入一个整数,用折半查找法从排好序的10个数中找出该数,若存在,在主函数中输出其所处的位置,否则,提示未找到.提示:可定义input函数完成10个整数的输入,sort函数完成输入数的排序,search函数完成输入数的査找功能. 下面是具体代码:(本人懒,没写注释,不过仔细看代码,还是很简单的) 1 #inclu

【转载】使用 gnuplot 在网页中显示数据

来源:http://www.ibm.com/developerworks/cn/aix/library/au-gnuplot/ 简介 gnuplot 是一个用于生成趋势图和其他图形的工具.它通常用于收集基于时间的数据,但是不限于此:也可以使用静态数据.gnuplot 可以以批模式运行或动态运行,结果由图形查看程序或 Web 浏览器显示.本文演示如何使用 gnuplot 和批文件为从 sar 或其他数据源收集的数据生成图形.gnuplot 有许多命令选项,可以通过 set 操作符使用它们.但是,要

Android 自定义的数字键盘 支持随意拖动 和稳定的字符输入的控件

经过 研究 实现了自定义 键盘 ,支持随意拖动 和数字及其他字符输入 下面是主要的代码 和使用方法 import android.content.Context; import android.util.Log; import android.view.GestureDetector; import android.view.GestureDetector.OnGestureListener; import android.view.Gravity; import android.view.Mo

我的VIM -- vimrc配置

主要都是参考融合了网上比较热的几分VIM配置文档,加上我的使用习惯而形成的.感谢他们的奉献! 基本上每行配置上面都有注释,相信仔细看下就会明白的了. "不要使用vi的键盘模式,而是vim自己的 set nocompatible " 语法高亮 set syntax=on " 去掉输入错误的提示声音 set noeb " 在处理未保存或只读文件的时候,弹出确认 set confirm " 自动缩进 set autoindent set cindent &quo