EasyUIEx 使用手册

---

jQuery EasyUI + EasyUIEx 的架构产生于企业开发实践，遵循Easy的原则，目标是简化一切可以简化的部分，为一切不具备的需求提供扩展。着重在CRUD方面进行了封装扩展，也欢迎更多开发实践的精华加入。

HTML EasyUIEx 使用手册

1. EasyUIEx 使用步骤：

1. 在项目中加入easyuiex目录（包含了easyuiex所需的css、images、js）

2. 在页面引入项目所需的静态资源（jQuery, jQuery EasyUI, EasyUIEx）

   用使用easy.jquery.edatagrid.js替换jquery.edatagrid.js，easyUIEx的edatagrid对性能和逻辑进行了优化，并提供附加功能。

    <!-- EasyUI CSS -->
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" id="themeLink">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
   
    <!-- EasyUI JS & Extension JS-->
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="easyui/datagrid-dnd.js"></script>
    <script type="text/javascript" src="easyui/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
   
    <!-- EasyUIEx -->
    <link rel="stylesheet" type="text/css" href="easyuiex/css/easyuiex.css">
    <script type="text/javascript" src="easyuiex/easy.easyuiex.min-2.0.0.js"></script>
    <script type="text/javascript" src="easyuiex/easy.easyuiex-validate.js"></script>
    <!-- 使用 EasyUIEx的 easy.jquery.edatagrid.js 代替 jquery.edatagrid.js，easyUIEx的edatagrid对性能和逻辑进行了优化，并提供附加功能。 -->
    <script type="text/javascript" src="easyuiex/easy.jquery.edatagrid.js"></script>
    <!-- 导入lang目录下相应语言文件 -->
     <script type="text/javascript" src="easyuiex/lang/easy.easyuiex-lang-zh_CN.js"></script> -->

2. EasyUIEx API 调用

uiEx是EasyUIEx的默认命名空间名称。EasyUIEx API 中针对DOM操作，带selector选择器的扩展函数都支持两种方式的调用。

注意：由于EasyUIEx内部封装datagrid, tree等某些DOM对象时使用到了对象的id属性，所以这些DOM元素必须具有唯一的id属性。优先推荐使用ID选择器选择DOM元素。

• 命名空间直接调用：在第一个参数传入要操作的DOM对象的选择器或对象

  uiEx.{methodName}(selector, [param1], ....);

   //方法一：uiEx命名空间调用
   uiEx.clearForm('#userForm')；
  
   uiEx.treeChk(
       "#rightsTree",
       {
           url:"do/menuJson.jsp"
       },
       [11]
   );

• jQuery对象扩展调用：使用jQuery对象直接调用方法

  $(selector).{methodName}([param1], ....);

   //方法二：jQuery对象扩展调用
   $('#userForm').clearForm();
  
   $("#rightsTree").treeChk(
       {
           url:"do/menuJson.jsp"
       },
       [11]
   );

3. EasyUIEx API：

1. 全局配置参数

• 消息国际化配置
  在lang/easy.easyuiex-lang-LANG_COUNTRY.js中修改

• 全局配置参数可以调整EasyUIEx的运行参数、方式和内容，修改参数：
  uiEx.{paramName} = paramValue

  具体作用参见注释，以下为默认配置：

  var uiEx = {
      /*
       * ################# 消息内容和控制部分
       */
      showRowEditMsg : false, // 是否在行编辑完后提示msg
      showRowAddMsg : false, // 是否在行添加完后提示msg
      showRowDeleteMsg : true, // 是否在行删除完后提示msg
      /*
       * ################# 自定义消息框的默认参数
       */
      msgDefaults : {
          timeout : 4000,
          showType : 'slide' // null、slide、fade、show。默认是 slide。
      // width:250,
      // height:100,
  
      },
      /*
       * ################# 数据网格默认参数
       */
      dataGridDefaults : {
          rownumbers : true, // 显示行号
          fitColumns : true, // 自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
          singleSelect : true, // 单选
          pagination : true, // 显示分页
          method : "post", // 提交方式
          striped : true
      // 表格条纹，奇偶行颜色交替
      },
      /*
       * ################# 数据网格详细视图默认参数
       */
      detailDataGridDefaults : {
          rownumbers : true, // 显示行号
          fitColumns : true, // 自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
          singleSelect : true, // 单选
          pagination : true, // 显示分页
          method : "post", // 提交方式
          striped : true, // 表格条纹，奇偶行颜色交替
          // 返回行明细内容的格式化函数
          detailFormatter : function(index, row) {
              return '<div class="ddv"></div>';
          }
      },
      /*
       * ################# url中使用{expression}表达式，解析时用到的正则
       */
      expReg : /\{([\s\S]+?)\}/g,
      /*
       * ################# 验证提示消息
       */
      msg : {}
  };

  2. alter、 confirm、 prompt、 msg 消息窗口相关函数

  /**
   * 操作提示
   * 
   * @param msg 消息内容
   * @param type 消息图标类型：error、info、question、warning
   * @param callback 回调函数
   */
  uiEx.alert(msg, type, callback);
  
  /**
   * 确认提示
   * 
   * @param msg 消息内容
   * @param callback 回调函数
   */
  uiEx.confirm(msg, callback);
  
  /**
   * 输入提示
   * 
   * @param msg 消息内容
   * @param callback 回调函数
   */
  uiEx.prompt(msg, callback);
  
  /**
   * 消息提示
   * 
   * @param msg 消息内容
   * @param position 消息位置：topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight; 默认为：bottomRight（右下角）
   * @param params msg消息框参数
   */
  uiEx.msg(msg, position, params);

3. dialog 对话框相关函数

• 支持两种调用方式

• 解决了EasyUI中Dialog需要定义在全局页面问题，关闭标签页时自动销毁Tab内部加载的Dialog

  关闭tab时，自动销毁加载的指定dialog，防止重复加载。
  由于EasyUI的Dialog在标签关闭后并不会被销毁（easyUI在解析dialog的时候，不论dialog定义在哪里，都会被放到body），所以为了防止在tab页面每次加载时重复定义，一般通过以下途径解决：
  1、将dialog放到主界面中，而不是通过tab来加载
  2、通刷新的tab的时候去销毁掉之前的dialog

• API

  /**
  * 显示指定对话框
  * 
  * @param dialogSelector dialog选择器
  * @param title 对话框标题
  * @return dialog对象
  */
  uiEx.openDialog(dialogSelector, title);
  
  /**
  * 显示指定href的对话框
  * 
  * @param dialogSelector dialog选择器
  * @param href 请求内容的href
  * @param title 对话框标题
  * @return dialog对象
  */
  uiEx.openHrefDialog(dialogSelector, href, title)
  
  /**
  * 关闭指定对话框
  * 
  * @param dialogSelector dialog选择器
  * @return dialog对象
  */
  uiEx.closeDialog(dialogSelector);

4. form 表单相关函数

• 支持两种方式调用。

• Ajax表单提交
  EasyUIEx.submitAjax和EasyUIEx.submitURLAjax内部封装了一个xRequestedWith=XMLHttpRequest参数，会随表单一同提交到服务器，帮助开发者在服务器端通过xRequestedWith参数来判断是否是Ajax请求。

  EasyUI的form表单组件的submit提交方法具有一定迷惑和误导性。其内部submit使用的是iframe提交，并非真正的Ajax方式提交。
  所以当使用者在服务器端试图通过请求头信息（X-Requested-With=XMLHttpRequest）判断是否是Ajax提交的请求时，并无法准确判断。

  同时，uiEx提供了一个Ajax表单提交全局事件处理函数formSubmitSuccess，能够监听表单Ajax提交成功事件，注册全局的处理函数。

  /*
  * 为使用EasyUIEx.submitAjax和EasyUIEx.submitURLAjax form表单提交成功的succes事件注册一个系统全局的必须执行函数
  * 类似于jQuery的全局ajaxSuccess函数
  * @param data 表单Ajax提交执行成功返回的数据
  *
  */
  uiEx.formSubmitSuccess=function(data){
     //...
  }

• API

  /**
  * 清除指定id的form表单信息
  * 
  * @param selector  表单选择器
  * @return form对象
  */
  uiEx.clearForm(selector);
  
  /**
  * 重置reset指定id的form表单信息
  * 
  * @param selector
  *            表单选择器
  * @return form对象
  */
  uiEx.resetForm(selector);
  
  /**
  * 开启表单验证
  * 
  * @param selector 表单选择器
  * @return form对象
  */
  uiEx.enableValidate(selector);
  
  /**
  * 禁用表单验证
  * 
  * @param selector 表单选择器
  * @return form对象
  */
  uiEx.disableValidate(selector);
  
  /**
  * 对表单进行验证
  * 
  * @param selector 表单选择器
  * @return form对象
  */
  uiEx.validate(selector);
  
  /**
  * 代替form("load", data);为表单填充数据
  * 可以指定表单名前缀，将数据填充到指定前缀的属性中去
  * 如将data中的name属性值填充到user.name中
  * 
  * @param selector 表单选择器
  * @param data 表单数据
  * @param prefix 表单名称前缀
  * @return form对象
  */
  uiEx.loadForm(selector, data, prefix);
  
  /**
  * 普通表单提交
  * 
  * @param formSelector 表单选择器
  * @param params  可选; form表单额外提交的参数
  * @param noValidate 可选; 是否验证; boolean; 默认为true
  */
  uiEx.submitForm(formSelector, params, noValidate);
  
  /**
  * 以Ajax进行带表单验证的表单提交，内部封装了一个`xRequestedWith=XMLHttpRequest`参数；
  * 会随表单一同提交到服务器，帮助开发者在服务器端通过`xRequestedWith参数`来判断是否是Ajax请求。
  * 
  * @param formSelector 表单选择器
  * @param callback AJAX请求后的回调处理函数
  * @param params 可选; form表单额外提交的参数
  * @param noValidate 可选; 是否验证; boolean; 默认为true
  */
  uiEx.submitAjax(formSelector, callback, params, noValidate);
  
  /**
  * 将表单以Ajax提交到指定url，内部封装了一个`xRequestedWith=XMLHttpRequest`参数；
  * 会随表单一同提交到服务器，帮助开发者在服务器端通过`xRequestedWith参数`来判断是否是Ajax请求。
  * 
  * @param formSelector 表单选择器
  * @param url 提交到的URL地址
  * @param callback AJAX请求后的回调处理函数
  * @param params 可选; form表单额外提交的参数
  * @param noValidate 可选; 是否验证; boolean; 默认为true
  */
  uiEx.submitURLAjax(formSelector, url, callback, params, noValidate) 
  
  /**
  * 将form表单信息格式化为JSON返回
  * 
  * @parama formSelector form选择器
  */
  uiEx.serializeJSON(formSelector);

5. tab 选项卡相关函数

• 支持两种方式调用。

• EasyUI Tabs两种动态动态加载方式之间的区别：

  • 使用content(iframe框架)引入页面:
    • content : '<iframe scrolling="auto" frameborder="0" src="'+ url + '" style="width:100%;height:100%;"></iframe>';
    • 作为独立窗口存在，页面内容独立，与当前页面互不干扰
      • 需要独立引入需要的JS和CSS资源
      • 弹出的内容是在内部窗口内
  • 使用href方法：
    • href : url,
    • 内容片段加载，引入的内容和当前页面合并在一起
    • 不需要引入页面已经引入的JS和CSS资源
    • 引用的页面不能有body，否则加载的内容内部的JS文件文法执行
    • 会显示html渲染解析的提示
  • 右键菜单HTML片段：

    <%-- ##################Tab选项卡的右键菜单，不能删除################## --%>
    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
           <div name="close"   data-options="iconCls:'icon-close'">关闭标签</div>  
           <div name="other"   data-options="">关闭其他标签</div>  
           <div name="all"  data-options="">关闭所有标签</div>
           <div class="menu-sep"></div>
           <div name="closeRight">关闭右侧标签</div>
           <div name="closeLeft">关闭左侧标签</div>
           <div class="menu-sep"></div>
          <div name="refresh"  data-options="iconCls:'icon-reload'">刷新标签</div> 
    </div>

  • api

    /**
     * 为指定Tab添加选项卡，支持双击关闭
     * 
     * @parma tabSelector 选项卡
     * @parma title 标题
     * @parma url 地址
     * @parma icon 可选；图标
     * @parma isIframe 可选；boolean值；是否使用iframe方式引入，true为使用iframe方式引入，默认为href方式
     * 
     * # EasyUI Tabs两种动态动态加载方式之间的区别：
     * - 使用content(iframe框架)引入页面:
     *         content : '<iframe scrolling="auto" frameborder="0" src="'+ url + '" style="width:100%;height:100%;"></iframe>';
     *        - 作为独立窗口存在，页面内容独立，与当前页面互不干扰
     *         - 需要独立引入需要的JS和CSS资源
     *         - 弹出的内容是在内部窗口内
     * - 使用href方法：
     *         href : url,
     *         - 内容片段加载，引入的内容和当前页面合并在一起
     *         - 不需要引入页面已经引入的JS和CSS资源
     *         - 引用的页面不能有body，否则加载的内容内部的JS文件文法执行
     *         - 会显示html渲染解析的提示
     * 
     */
    uiEx.openTab(tabSelector, title, url, icon, isIframe);
    
    /**
     * 刷新当前选项卡选中的Panel
     * 
     * @param tabSelector 选项卡选择器
     */
    uiEx.reloadSelTab(tabSelector);
    
    /**
     * 根据菜单Text自动在指定Tab打开某个菜单
     * 
     * @param menuSelector
     *            menu选择器
     * @param tabSeelctor
     *            选项卡选择器
     * @param menuText
     *            要打开的菜单文本，可以使用数组定义多个菜单文本
     */
    uiEx.openMenuByText(menuSelector, tabSeelctor, menuText);
    
    /**
     * 根据菜单Id自动在指定Tab打开某个菜单
     * 
     * @param menuSelector
     *            menu选择器
     * @param tabSeelctor
     *            选项卡选择器
     * @param menuId
     *            要打开的菜单id，可以使用数组定义多个菜单id
     */
    uiEx.openMenuById(menuSelector, tabSelctor, menuId);
    
    /**
     * 绑定tabs的右键菜单，实现：关闭，关闭其他，关闭所有；关闭左侧标签页、关闭右侧标签页；刷新等菜单功能
     * 
     * @param tabSelector tab选择器
     * @param menuSelector menu选择器；可选，默认之为#tabsMenu
     * 
     * 必须在页面定义右键菜单标签（菜单id、菜单项的name不能修改）：
     *       
    <%-- ##################Tab选项卡的右键菜单，不能删除################## --%>
    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
           <div name="close"   data-options="iconCls:'icon-close'">关闭标签</div>  
           <div name="other"   data-options="">关闭其他标签</div>  
           <div name="all"  data-options="">关闭所有标签</div>
           <div class="menu-sep"></div>
           <div name="closeRight">关闭右侧标签</div>
           <div name="closeLeft">关闭左侧标签</div>
           <div class="menu-sep"></div>
          <div name="refresh"  data-options="iconCls:'icon-reload'">刷新标签</div> 
    </div>
     */
    uiEx.addTabsContextMenu(tabSelector, menuSelector)

6. datagrid、edatagrid、detaildatagrid 数据网格相关函数

• 支持两种方式调用

• 封装和扩展：EasyUIEx针对使用datagrid相关组件的CRUD应用进行了深入封装，提供了附加功能，在调用初始化方法时，配合传入url、saveUrl、updateUrl、destroyUrl等CRUD的服务器操作地址参数（和edatagrid的参数保持了一致），就能以一致的方式借助EasyUIEx的API完成CRUD操作。

• 性能优化：为datagrid和edatagrid 提供了行编辑状态监测，优化修改的请求。当行编辑，列编辑，未修改内容时并不提交请求。

• datagrid、edatagrid、detaildatagrid、treegrid 共同扩展属性

Name	Type	Description	Default
url	string	查询数据url；获取：dg.datagrid("options").url	false
saveUrl	string	保存数据url；获取：dg.datagrid("options").saveUrl	false
updateUrl	string	修改数据url；获取：dg.datagrid("options").updateUrl	false
destroyUrl	string	删除数据url；获取：dg.datagrid("options").destroyUrl	false
showHeaderContextMenu	boolean	是否在表头显示右键菜单，可选择显示的列	false
showContextMenu	boolean	是否显示右键菜单，配合menuSelector属性使用	false
menuSelector	string	菜单选择器
successKey	string	服务器端返回的成功标记key，例如："statusCode"
successValue	string	服务器端返回的成功标记value，例如："200"
mutipleDelete	boolean	是否开启多行提交删除	false
mutipleDeleteProperty	string/Array	多行删除时提及给服务器的属性和值，不会添加sendRowDataPrefix前缀，支持使用数组指定多个属性名

• datagrid、edatagrid 共同扩展属性

Name	Type	Description	Default
sendRowDataPrefix	boolean	添加、删除、更新数据时，支持设置提交row数据前缀sendRowDataPrefix:"sysUser."，这样提交的数据参数名前会增加指定的前缀，方便在使用Struts等框架时将数据提交到sysUser对象中接收。

• datagrid

Name	Type	Description	Default
clickRowEdit	boolean	在DataGrid单击时实现行编辑，可以代替edatagrid实现带行编辑的datagrid	false
clickCellEdit	boolean	是否开启单击列编辑功能	false

• edatagrid 扩展属性
  使用easy.jquery.edatagrid.js替换jquery.edatagrid.js，easyUIEx的edatagrid对性能和逻辑进行了优化，并提供附加功能。

Name	Type	Description	Default
clickEdit	boolean	是否开启单击编辑(edatagrid默认为双击开启编辑)	false
showMsg	boolean	是否显示添加、修改提示消息	false

• Demo

  // datagrid 初始化
  var dg = $("#sysUserDataGrid");
  dg.initDatagrid({
    iconCls : 'icon-group',
    /*
     * 行编辑:saveUrl、updateUrl、destroyUrl配合uiEx使用
     */
    url : "sysUser_list.action",
    saveUrl : "sysUser_save.action",
    updateUrl : "sysUser_update.action",
    destroyUrl : "sysUser_delete.action",
    showHeaderContextMenu:true, // 表头添加右键菜单，可选择显示的列
    // clickRowEdit:true, //注册单击行编辑，可以代替edatagrid实现带行编辑的CRUD
    pageSize : 10,
    pageList : [ 5, 10, 15, 20 ],
    checkbox : true,
    singleSelect : false,
    checkOnSelect : true,
    //双击操作
    onDblClickRow : function(rowIndex, rowData) {
        toEdit(rowData);
    },
    menuSelector:"#sysUserContextMenu",
    showContextMenu:true,
    sendRowDataPrefix:"sysUser.",
    mutipleDelete: true, // 多行提交删除
    mutipleDeleteProperty:"userId" // 多行删除时提及给服务器的属性和值，不会添加sendRowDataPrefix前缀，支持使用数组指定多个属性名
  });

  // edatagrid 初始化
  $("#deptDataGrid").initEdatagrid({
     /*
      * 行编辑:saveUrl、updateUrl、destroyUrl配合uiEx使用
      */
     url : "dept_list.action",
     saveUrl : "dept_save.action",
     updateUrl : "dept_update.action",
     destroyUrl : "dept_delete.action",
     idField : "deptno",
     showHeaderContextMenu : true, // 表头添加右键菜单，可选择显示的列
     pagination : true,
     checkbox : true,
     checkOnSelect : true,
     singleSelect : false,
     autoSave : true,
     //queryParam:{"rows":dg.datagrid("options").pageSize},
     clickEdit : true, //单击编辑
     showMsg : true, // 显示操作消息
     //右键菜单
     menuSelector : "#deptContextMenu",
     showContextMenu : true,
     sendRowDataPrefix : "dept.", //提交数据前缀
     successKey : "statusCode", //服务器端返回的成功标记key
     successValue : "200" //服务器端返回的成功标记value
  });

  // detaildatagrid 初始化
  uiEx.initDetailDatagrid("#userDataGrid2","do/toDetailEdit.jsp",{
    /*
    * 行编辑:saveUrl、updateUrl、destroyUrl配合uiEx使用
    */
    url : "do/doList.jsp", //数据表格数据查询
    saveUrl : "do/doMyUsers.jsp?t=add", //保存
    updateUrl : "do/doMyUsers.jsp?t=edit&id={id}", //修改
    destroyUrl : "do/doMyUsers.jsp?t=delete", //删除
    iconCls : "icon-group",
    showHeaderContextMenu : true, // 表头添加右键菜单，可选择显示的列
    pageSize : 5,
    pageList : [ 5, 10, 15, 20 ]
  });

  // treegrid 初始化
  $("#sysMenuPermissionDataGrid").initTreegrid({
    url : 'sysMenuPermission_list.action',
    rownumbers : true,
    idField : "id",
    treeField : 'text',
    lines : true,
    //双击操作
    onDblClickRow : function(rowData) {
        toEdit(rowData);
    },
    // 表头添加右键菜单，可选择显示的列
    showHeaderContextMenu : true,
    menuSelector : "#sysMenuPermissionContextMenu",
    showContextMenu : true
  });

• API

  • grid 初始化 API

  /**
  * DataGrid: datagrid初始化，包含了uiEx.dataGridDefaults默认参数
  * 
  * @param datagridSelector datagrid选择器
  * @param params 可选；datagrid初始化参数
  */
  uiEx.initDatagrid(datagridSelector, params);
  
  /**
  * EditDataGrid: edatagrid初始化，包含了uiEx.dataGridDefaults默认参数
  * 
  * @param datagridSelector datagrid选择器
  * @param params 可选；datagrid初始化参数
  */
  uiEx.initEdatagrid(datagridSelector, params);
  
  /**
  * DetailDataGrid: DetailDataGrid初始化，包含了detailDataGridDefaults参数的默认值
  * 
  * @param datagridSelector datagrid选择器
  * @param detailUrl 加载详细视图的url
  * @param params 可选；其他参数，主要包括数据CRUD的url地址
  */
  uiEx.initDetailDatagrid(datagridSelector, detailUrl, params);
  
  /**
  * Treegird: Treegird初始化
  * 
  * @param treegridSelector
  *            treegrid选择器
  * @param params
  *            可选；treegrid其他参数
  */
  uiEx.initTreegrid(treegridSelector, params);

  • datagrid CRUD API

  /*
  * ############## DataGrid CRUD
  */
  /**
  *  datagrid：为行编辑DataGrid追加新行
  * 
  * @param datagridSelector DataGrid选择器
  * @param rowParam 可选；新数据行的数据参数
  */
  uiEx.rowAdd(datagridSelector, rowParam);
  
  /**
  * datagrid：为指定DataGrid启用行编辑，会引起一次新加载
  * 
  * @param datagridSelector  datagrid选择器或对象
  */
  uiEx.rowEdit(datagridSelector);
  
  /**
  * 取消选中行的编辑
  * 
  * @param datagridSelector
  *            DataGrid选择器
  */
  uiEx.rowCancelEdit(datagridSelector)；
  
  /**
  * datagird、edatagrid、detaildatagrid、treegrid:删除选中行，支持mutipleDelete多行删除参数
  * 
  * @param datagridSelector
  *            DataGrid选择器
  * @param showMsg
  *            可选；boolean值，是否显示提示消息，会覆盖默认的全局uiEx.showRowDeleteMsg参数值
  * @param reloadDataGrid
  *            可选；是否reload重新加载 DataGrid，默认为false
  * @param successKey
  *            可选；字符串值，执行成功返回的标记key，值必须和successValue相同才代表删除成功
  * @param successValue
  *            可选；字符串值，执行成功返回的标记value
  *  
  *  - demo：
  *  dg.rowDelete(true, false, "statusCode", "200");
  */
  uiEx.rowDelete(datagridSelector,  showMsg, reloadDataGrid, successKey, successValue)；

  • DetailDataGrid API

  /**
   * DetailDataGrid: DetailDataGrid添加行
   * 
   * @param datagridSelector datagrid选择器
   */
  uiEx.detailRowAdd(datagridSelector);
  
  /**
   * DetailDataGrid: DetailDataGrid编辑保存
   * 
   * @param datagridSelector datagrid选择器
   * @param index 编辑行索引，加载详细数据时，index值会提交到服务器，直接从服务器端请求参数获得传入该函数
   *            例如，JSP写法：uiEx.detailRowSave('#userDataGrid',${param.index})
   * @param showMsg 可选；是否显示提示信息
   */
  uiEx.detailRowSave(datagridSelector, index, showMsg);
  
  /**
   * DetailDataGrid: DetailDataGrid取消编辑或添加
   * 
   * @param datagridSelector datagrid选择器
   * @param index 编辑行索引，加载详细数据时，index值会提交到服务器，直接从服务器端请求参数获得传入该函数
   *            例如，JSP写法：uiEx.detailRowCancel('#userDataGrid',${param.index})
   */
  uiEx.detailRowCancel(datagridSelector, index);

  • Edatagrid API

    /**
     * edatagrid, 开始编辑，直接单击编辑，无需双击开启编辑
     * 
     * @param datagridSelector
     *            EDataGrid选择器
     */
    uiEx.beginEditGrid(datagridSelector);
  
    /**
     * edatagrid, 结束编辑，进入可编辑状态 不同于disableEditing禁用编辑，禁用编辑则无法编辑
     * 
     * @param datagridSelector
     *            EDataGrid选择器
     */
    uiEx.endEditGrid(datagridSelector);

7. treegrid 树形网格相关函数

• 支持两种方式调用。

• 扩展属性

Name	Type	Description	Default
showHeaderContextMenu	boolean	是否在表头显示右键菜单，可选择显示的列	false
showContextMenu	boolean	是否显示右键菜单，配合menuSelector属性使用	false
menuSelector	string	菜单选择器

• Demo

  $("#sysMenuPermissionDataGrid").initTreegrid({
    url : 'sysMenuPermission_list.action',
    rownumbers : true,
    idField : "id",
    treeField : 'text',
    lines : true,
    //双击操作
    onDblClickRow : function(rowData) {
        toEdit(rowData);
    },
    // 表头添加右键菜单，可选择显示的列
    showHeaderContextMenu : true,
    menuSelector : "#sysMenuPermissionContextMenu",
    showContextMenu : true
  });

  <!-- 折叠和展开当前目录 -->
  <div id="sysMenuRightContextMenu" class="easyui-menu" style="width:120px;">
    <div onclick="uiEx.collapse('#sysMenuRightDataGrid')">折叠目录</div>
    <div onclick="uiEx.expand('#sysMenuRightDataGrid')">展开目录</div>
  </div>

• api

  /**
  * Treegird: Treegird初始化
  * 
  * @param treegridSelector
  *            treegrid选择器
  * @param params
  *            可选；treegrid其他参数
  */
  uiEx.initTreegrid(treegridSelector, params)
  
  /**
  * 折叠选中目录
  * @param treeGridSelector treeGrid选择器 
  * 
  */
  uiEx.collapse(treeGridSelector);
  
  /**
  * 展开选中目录
  * @param treeGridSelector treeGrid选择器 
  * 
  */
  uiEx.expand(treeGridSelector);

8. tree 树增强相关函数

• 支持两种方式调用

• 支持与Tabs绑定

• 扩展属性

Name	Type	Description	Default
expandChilds	boolean	点击菜单父节点展开子节点功能	false

• Demo

  //普通树菜单初始化
  uiEx.initTree(
    "#menu",  //树菜单selector
    "#tabs",  //打开树菜单url的tabSelector
       //其他树参数
    {
        expandChilds: true, //点击父菜单，展开子菜单
        data: EasySSH.menuTreeJson
       //url : "json/menuTree.json.js", 
    }
  );

  //自动打开指定Text的菜单 
  uiEx.openMenuByText("#menu","#tabs","CRUD");

• API

  /*
  * ############## Tree 
  */
  /**
   * Tree: tree初始化，包含两大默认功能：
   * 1. 点击菜单父节点打开子节点功能
   * 2. 点击菜单在tabSelector指定的tab打开
   * 3. tab双击关闭
   * 
   * @param treeSelector datagrid选择器
   * @param tabSelector  打开树菜单url的tab选择器
   * @param params 可选；tree初始化参数
   */
  uiEx.initTree(treeSelector, tabSelector, params);
  
  /**
   * onSelect事件处理：Tree的onSelect事件的实现，能实现点击菜单父节点打开子节点功能 在树初始化时通过注册onSelect事件传入
   * onSelect : uiEx.expandChilds, //点击菜单父节点打开子节点功能
   * 
   * 通过initTree的expandChilds属性可以实现相同效果：
   * expandChilds: true; 
   * 
   * @param node
   *            事件调用时传入点击的节点对象
   */
  uiEx.expandChilds(node);

• tabs绑定相关API

  /*
  * ############## Tree Menu open to tab
  */
  /**
   * 根据菜单Text自动在指定Tab打开某个菜单
   * 
   * @param menuSelector menu选择器
   * @param tabSeelctor 选项卡选择器
   * @param menuText  要打开的菜单文本，可以使用数组定义多个菜单文本
   */
  uiEx.openMenuByText(menuSelector, tabSelector, menuText);
  
  /**
   * 根据菜单Id自动在指定Tab打开某个菜单
   * 
   * @param menuSelector menu选择器
   * @param tabSeelctor 选项卡选择器
   * @param menuId 要打开的菜单id，可以使用数组定义多个菜单id
   */
  uiEx.openMenuById(menuSelector, tabSelctor, menuId);

9 复选框树（Checkbox Tree）

• 支持两种方式调用

• 扩展属性

Name	Type	Description	Default
showTitle	string	鼠标移上菜单项title提示功能，可指定显示的属性
noChildCascadeCheck	boolean	级联选中父节点，但选中父节点不级联选中子节点。而cascadeCheck:true会导致父节点选中时子节点自动全选。	false

• Demo

  /*
  * 复选框树初始化
  */
  $("#rightsTree").initTreeChk(
        //树加载参数
        {
            url:"do/menuJson.jsp"  //获取树JSON数据
        },
        [11] //默认选中值数组
  );

  /*
  * 初始化权限复选框
  */
  uiEx.initTreeChk("#sysRoleEditRights", {
    url : "sysMenuRight_listAll.action",
    checkbox:true,
    animate:true,
    lines:true,
    noChildCascadeCheck: true, //级联选中父节点，但选中父节点不级联选中子节点
    showTitle:"remark" //将remark属性作为title显示
  }, data.list);

  /*
  * 重置
  */
  rights.resetTree=function(){
    uiEx.treeChkRest("#rightsTree");
  }

  /*
  * 提交
  */
  rights.submit=function(){
    $("#rightsForm").submitAjax(function(data){
            console.info("提交成功");
        },
        //随rightsForm表单一同提交到服务器的参数——复选框树选中的节点id列表（#分隔）
        {
            ids:uiEx.getCheckedIds("#rightsTree").join("#")
        }
    );
  }

  /*
  * 获得复选框树选中的节点中attributeArray指定的属性值，返回获得值列表的数组
  */
  uiEx.getCheckedInfos("#sysRoleAddRights",["id","type"])

• API

  /*
  * ############## Checkbox Tree
  */
  /**
  * 复选框树初始化
  * 
  * @param treeSelector 树选择器或对象
  * @param param 树加载参数
  * @param values 默认选中值数组
  */
  uiEx.initTreeChk(treeSelector, param, values);
  
  /**
  * 带复选框的树重置，配合uiEx.treeChk使用
  * 
  * @param treeSelector 树选择器或对象
  */
  uiEx.treeChkRest(treeSelector);
  
  /**
  * 设置选中的树复选框，注意：此方法必须在树渲染完后调用
  * 
  * @param treeSelector 树选择器或对象
  * @param values 选中的树节点ID数组
  */
  uiEx.treeChkSetValues = function(treeSelector, values); 
  
  /**
  * 获得带复选框树选中的节点id数组
  * 
  * @param treeSelector  树选择器或对象
  * @return 带复选框树选中的节点id数组
  */
  uiEx.getCheckedIds(treeSelector);
  
  /**
  * 获得复选框树选中的节点中attributeArray指定的属性值，返回获得值列表的数组
  * 
  * @param treeSelector 树选择器或对象
  * @param propertyArray 树属性数组
  * @return 获得值列表的数组
  */
  uiEx.getCheckedInfos(treeSelector, propertyArray);

10. 自定义验证器

• 由于验证场景和规则不一，可根据需要扩展easy.easyuiex-validate.js，注册自定义的验证器。

• DEMO：

  <input id="renewpwd" name="renewpwd" class="easyui-textbox" 
  type="password"  
  data-options="required:true,validType:['minLength [6]','equals[\'#newpwd\',\'与新密码不一致.\']']"> </input>

• API

  $(function() {
      /*
       * ################# 自定义验证部分
       */
  
      /**
       * 比较输入是否与指定元素一致
       */
      $.extend($.fn.validatebox.defaults.rules, {
          equals : {
              validator : function(value, param) {
                  return value == $(param[0]).val();
              },
              message : '{1}'
          }
      });
  
      /**
       * 输入最小长度验证
       */
      $.extend($.fn.validatebox.defaults.rules, {
          minLength : {
              validator : function(value, param) {
                  return value.length >= param[0];
              },
              message : uiEx.msg.minLength
          }
      });
  
  })

11. 其他函数

/**
 * 将变量uiEx的控制权让渡给第一个实现它的那个库
 * @return uiEx对象的引用
 */
uiEx.noConflict();

4. EasyUIEx 实例：

EasyUIEx demo online

结束

留言评论

如果您有更好意见，建议或想法，请联系我。

联系、反馈、定制、培训 Email：inthinkcolor@gmail.com

支付宝钱包扫一扫捐助：

http://www.easyproject.cn