emap组件使用

关注

原创最新推荐文章于 2026-06-20 14:30:30 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

EMAP研究生线开发使用手册 EMAP研究生线开发手册 1 svn是什么？ svn即subVersion（子版本），是版本控制工具，也就是多个人开发同一个项目，共享一个资源，将仓库的代码/项目（被共享的资源）下载到本地，然后对下载到本地的代码进行编写修改。 2 总是报错：找不到xxxx数据源？ 1 首先需要刷新数据连接下的数据源；2 再刷新root目录下的jdbc.proprities文件（选中文件，右击emap，选择刷新数据源） 3 tomcat的端口设置因为需要使用应用与组件2个服务，所以tomcat需要设置2个端口，避免端阅读详情

定义一个插件 plugin

$.fn.emapdatatable = function(options, params, callback, flag) { };

jquery中的$.fn的用法

一、$.fn.method()=function(){}和$.fn.extend({})的比较

jQuery.fn ===$.fn=== jQuery.prototype

$.fn.method()=function(){}的调用，把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。由于有return this,所以支持链式，在调用的时候可以这样写：$('.blue').blueBorder().blueText();
$.fn.extend({}) 是对$.fn.method()=function(){}的扩展，它可以定义多个方法：

$.fn.extend({
    a: function() { },
    b: function() { }
});

等效于：

$.fn.a = function() { };
$.fn.b = function() { };

$.extend({}) ,为jQuery类添加方法，可以理解为扩展静态方法
```
$.extend({
    abc: function(){
        alert('abc');
    }
});
```

emapdatatable插件的具体实现

$.fn.emapdatatable = function(options, params, callback, flag) {
    var instance, initParams;
    instance = this.data('emapdatatable');
    initParams = this.data('initParams');
    if (options === true) return instance;
    /**
     * 判断插件是否已经实例化过，如果已经实例化了则直接返回该实例化对象
     */
    if (!instance) {
      //params为表格渲染的初始化参数，后续表格的reload始终会携带该参数
      $(this).data('initParams', options.params);
      return this.each(function() {
        //将实例化后的插件缓存在dom结构里（内存里）
        return $(this).data('emapdatatable', new Plugin(this, options));
      });
    }
    /**
     * 优雅处： 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。
     * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
     * doSomething是刚才定义的接口。
     * 这种方法 在 juqery ui 的插件里 很常见。
     */
    if ($.type(options) === 'string') {
      var paramsObj = $.extend({}, initParams, params);
      var querySetting = [];
      //默认如果请求参数中有高级搜索的参数 会把其他参数合并进高级搜索参数querySetting
      //如果flag为false则不合并。
      if (typeof paramsObj.querySetting != 'undefined' && flag !== false) {
        // add by liujun 2016-12-8 originQuerySettingType  queryStting处理前后保持相同的类型，如果之前的字符串则处理完后也序列号成字符串
        var originQuerySettingType = ''
        if (typeof paramsObj.querySetting === 'string') {
          querySetting = JSON.parse(paramsObj.querySetting);
          originQuerySettingType = 'string'
        } else {
          querySetting = paramsObj.querySetting
          originQuerySettingType = 'object'
        }
        $.each(paramsObj, function(k, v) {
          if (k != 'querySetting' && ($.type(v) == 'number' || $.type(v) == 'string' || $.type(v) == 'boolean')) {
            if ($.type(v) == 'string' && v.indexOf(',') > -1) {
              // var valueArr = v.split(',');
              // valueArr.forEach(function(item) {
              //     querySetting.push({
              //         name: k,
              //         value: item,
              //         linkOpt: 'or',
              //         builder: 'm_value_equal'
              //     });
              // });
              // add form OA焦祖春 把OR变成AND 因为是emapdatatable的初始条件，跟其他条件应该是AND关系 by jbxu 2019-05-06
              querySetting.push({
                name: k,
                value: v,
                linkOpt: 'AND',
                builder: 'm_value_equal'
              });
            } else {
              querySetting.push({
                name: k,
                value: v,
                linkOpt: 'AND',
                builder: 'equal'
              });
            }
          }
        });

        if (originQuerySettingType === 'string') {
          paramsObj.querySetting = JSON.stringify(querySetting);
        }
        return instance[options](paramsObj, callback);
      }
      //存在初始化参数，携带初始化参数调用方法
      if (initParams) {
        return instance[options](paramsObj, callback);
      }
      //直接使用传参
      return instance[options](params, callback);
    }
    return this;
};

调用

根据id或class获取jquery对象：var $obj = $("#contanier");
由于事先通过$.fn.method()=function(){}，把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法；即$obj对象内部已经附带了这些方法了；在这里是$.fn.emapdatatable= function(options, params, callback, flag)。

调用jquery对象$obj中的emapdatatable方法，并且传入参数，进行表格的初始化

//$.fn.emapdatatable= function(options, params, callback, flag)
$obj.emapdatatable({"这里是参数集对象"});
//参数集：初始化时参数及对应着options
var options = {
	pagePath: ROOT_PATH + pageUrl + ".do",
	height: null,
	minLineNum: (lineNum == undefined) ? 10 : lineNum,
	params: (params == undefined) ? {} : params,
	action: actionName,
	pageable: (pageable == false) ? false : true,
	sortable: (sortable == true) ? true : false,
	customColumns: (customColumns == undefined) ? [] : customColumns,
	selectionMode: selectionMode ? selectionMode : 'custom',
	onceParams: (onceParams == undefined) ? {} : onceParams,
	enableBrowserSelection: true,
	fastRender: true,
	rendered: renderedFunction,
	pageSizeOptions: (pageSizeOptions == undefined) ? [10, 20, 50, 100] : pageSizeOptions,
	pageSize: (pageSize == undefined) ? 10 : pageSize
};

//默认参数集
$.fn.emapdatatable.defaults = {
    width: '100%',
    height: height,
    pageable: true,
    pagerMode: 'advanced',
    serverProcessing: true,
    pageSizeOptions: ['10', '20', '50', '100'],
    localization: localization,
    sortable: false,
    columnsReorder: false,
    selectionMode: "custom",
    enableBrowserSelection: true,
    incrementalSearch: false,
    columnsResize: true,
    defaultParams: false,
    onceParams: false,
    colHasMinWidth: true, // 列宽是否有默认最小值100px
    beforeSend: null,
    contextPath: '', //
    schema: true, // 启用schema，必须定义 contextPath   &&  未定义contextPath时   schema 不生效
    minLineNum: null,
    alwaysHide: ['WID', 'TBRQ', 'TBLX', 'CZRQ', 'CZZ', 'CZZXM'], // 自定义显示列的隐藏字段
    fastRender: false,
    canEdit: true,
    isCellEditable: null,
    isEditMode: false,
    editPageable: false,
    isOnceEmpty: false,
    mustSelect: true,
    defaultCellsRenderer: undefined,
    customOptions: null,
    saveSchemaCallback: null
};

示例

/**
* @memberof module:emapdatatable
* @description 其他参数参考jqxDatatable{@link http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm?search=}
* @prop {String} [pk=WID] - 数据主键字段
* @prop {String} [url] - 请求表格数据的后台接口, url和pagePath二选一必填
* @prop {String} [pagePath] - 请求表格数据页面地址, url和pagePath二选一必填
* @prop {Object} params - 请求参数
* @prop {Array} datamodel - 一般为emap返回的数据模型
* @prop {String} action - emap动作名
* @prop {Array} customColumns - 自定义表格列,colIndex:该自定义位于表格第几列，从0开始，最后一列可以设置‘last’； colField: 自定义列作用的列模型字段； type: 自定义列类型，支持checkbox，link，tpl。chekcbox不可定义colField参数，如果定义了colIndex，则customColumns数组必须按照colIndex值由小到大排序
* @prop {Object} replaceColumns - 现有列属性替换，该对象中的key对应模型的name属性，值对应jqwidget datatable column属性，如：{"XH":{sortable:true}}，下面有示例代码
* @prop {Int|Stirng} [height] - 高度
* @prop {Boolean} [pageable=true] - 是否分页
* @prop {String} [pagerMode=advanced] - 分页形式 'advanced' 'simple'
* @prop {Boolean} [serverProcessing=true] - 是否开启服务端分页 
* @prop {Array} [pageSizeOptions=['10', '20', '50', '100']] - 分页条数选项
* @prop {String} [localization='zh-CN'] - 语言选择
* @prop {Boolean} [sortable=false] - 排序
* @prop {String} [selectionMode='custom'] - Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.
* @prop {Boolean} [enableBrowserSelection=true] - Enables or disables the default text selection of the web browser.
* @prop {Boolean} [columnsResize=true] - Sets or gets the jqxDataTable's columnsResize.
* @prop {Boolean} [colHasMinWidth=true] - 列宽是否有默认最小值100px
* @prop {Boolean} [schema=true] - 启用schema，必须定义 contextPath   &&  未定义contextPath时   schema 不生效
* @prop {String} [contextPath] - 根路径
* @prop {Int} [minLineNum] - 最小高度行数 
* @prop {Boolean} [fastRender=false] - 快速渲染， 用于提高表格渲染速度 
* @prop {Function} [beforeSend] - 请求发送前的回调函数
* @prop {Function} [downloadComplete] - 表格数据请求完成的回调 
* @prop {Boolean} [isOnceEmpty=false] - 表格默认是否为空，不加载数据
* @prop {Boolean} [mustSelect=true] - 自定义显示列弹窗是否开启必须勾选字段校验 
* @prop {Boolean} [columnsReorder=false] - 是否开启列拖拽排序 
* @prop {Function} [customOptions] - 初始化表格的options，允许干预
* @prop {Boolean} [fxss] - 是否开启开启防跨站脚本攻击，默认与WIS_EMAP_CONFIG['emapdatatable.fxss']相同
* @prop {Function} [defaultCellsRenderer] - 这是一个同步函数，设置该函数将会忽略默认渲染，必须返回一个字符串。函数的入参：row, column, value, rowData, colModel, settings
* @example
*/
$el.emapdatatable({
      pagePath: bs.api.pageModel,
      action: 'T_PXXX_XSJBXX_QUERY',
      customColumns: [{
          colIndex: '0',
          type: 'checkbox'
      }],
      sortable:true,
      replaceColumns:{
          "XH":{
              sortable:true,
              cellsRenderer: function(row, column, value, rowData){
                  console.log(111)
                  return value;
              }
          }
      },
      customOptions: function(jqxOptions) {
          return jqxOptions;
      }
  });

new Plugin实例化插件，并缓存在dom结构里（内存里）

① return $(this).data('emapdatatable', new Plugin(this, options));

② new Plugin(this, options);

//this指代当前dom对象
//options代表当前传入的setting参数集
//由new操作符，构造函数，得到新的实例，
var _dataTable_Instance = new Plugin(this, options);

new Plugin

(function() {
      var Plugin;
	  var editedBg = 'cell-edited';
	  var toDeleteKey = 'isToDelete';
	  var toDeleteLine = 'to-delete-line';
	  var showToDeleteLine = 'show-to-delete';

	  /**
	   * @module emapdatatable
	   * @alias 表格
	   * @description 数据表格 
	   */
	  Plugin = (function() {

        function Plugin(element, options) ==>调用_create()生成表格

		//供调用的方法
		Plugin.prototype.reload
		Plugin.prototype.reloadFirstPage
		Plugin.prototype.checkedRecords
		Plugin.prototype.checkedRowsIndex 
		Plugin.prototype.getTotalRecords
		Plugin.prototype.getResult
		Plugin.prototype.getRowsData
		Plugin.prototype.getSort
		Plugin.prototype.getModel
                //插件的私有方法
		function _create(instance) 
		function bindingComplete(instance, event)
		function _resetPageFooter(instance)
		function _handleHorizontalScrollBar(instance)
		function _handleVerticalScrollBar(instance) 
		function _handleMinHeight(instance)
		function _initSchema(instance, modelName, contextPath) 
		function _handleSortStyle(instance)
		function _convertEditModeCols(columns, newmodel)
		function _genColums(instance, jqxOptions, custom_ready, custom_rendered)
		function hideLoading(instance)
		function _scenesTableContentCheckboxClick($input, instance)

                //默认setting参数集
                $.fn.emapdatatable.defaults
)}.call(this);

收录于