UNPKG

iweb-tool

Version:
1,461 lines (1,364 loc) 188 kB
; (function($, window, document, undefined) { /* * 对象所支持的属性及默认值 */ var dataSource = function(options, gridComp) { this.defaults = { } this.gridComp = gridComp; this.options = $.extend({}, this.defaults, options); this.rows = new Array(); // 存储数据行 this.hasParentRows = new Array(); // 存在父项 this.nothasParentRows = new Array(); // 不存在父项 this.sortRows(); }; var gridCompColumn = function(options, gridOptions) { this.defaults = { width:200, // 默认宽度为200 sortable: true, // 是否可以排序 canDrag: true, // 是否可以拖动 fixed: false, // 是否固定列 visible: true, // 是否显示 canVisible: true, // 是否可以隐藏 sumCol:false, // 是否计算合计 editable:true, // 是否可修改 editFormShow:true, // 是否可修改 autoExpand:false, // 是否自动扩展列 editType:'text', // 编辑类型,支持传入function扩展 dataType:'String', // 数据类型,string, date, datetime, integer, float //precision: //精度 format:'yyyy-MM-dd hh:mm:ss', //renderType:'', 渲染类型 //headerColor headerLevel:1 //header层级 // parentHeader 对应的父header的title // 目前仅支持两级,多级的话需要改变头的高度,另外处理当前级别的时候需要看下是否存在上级,如果存在上级的话 // 则创建新的div,这就涉及到需要躲变量计算每级的宽度,需要考虑下如何实现。 }; // 从grid继承的属性 var gridDefault = { sortable: gridOptions.sortable, canDrag: gridOptions.canDrag, // editable: gridOptions.editable, width: gridOptions.columnWidth }; if(options.dataType == 'Date'){ this.defaults.format = 'yyyy-MM-dd'; } // 树表暂时不支持排序 if(gridOptions.showTree){ options.sortable = false; } this.options = $.extend({}, this.defaults, gridDefault, options); // 转成数字 this.options.width = parseInt(this.options.width); this.firstColumn = false; }; var gridComp = function(ele, options) { this.dataSource = dataSource; this.gridCompColumn = gridCompColumn; this.ele = ele[0]; this.$ele = ele; this.defaults = { id: 'grid', //width: '100%', //height: '100%', columnWidth:200, sortable: true, // 是否可以排序 canDrag: true, // 是否可以拖动 canSwap: true, // 是否可以交换列位置 showHeader: true, // 是否显示表头 columnMenu: true, // 是否存在列头操作按钮 showNumCol: false, // 是否显示数字列 multiSelect:false, // 是否显示复选框 showSumRow: false, // 是否显示合计行 editable: false, // 是否可修改 noneEditableFormShow:true,// form编辑器是否显示不可编辑字段 editType: 'default', // 编辑方式,default为行编辑,form为在行下方以form编辑 showTree:false, // 是否显示树表 autoExpand:true, // 是否默认展开 cancelFocus:false, // 第二次点击是否取消focus maxHeaderLevel:1 // header的最高层级,用于计算header区域的高度 } this.transDefault = { ml_show_column:trans('gridComp.show_column', '显示/隐藏列'), ml_clear_set:trans('gridComp.clear_set', '清除设置'), ml_no_rows:trans('gridComp.no_rows', '无数据'), ml_sum:trans('gridComp.sum', '合计:'), ml_close:trans('gridComp.close', '关闭') } this.transMap = $.extend({},this.transDefault,options.transMap); if(options.maxHeaderLevel > 1){ options.canSwap = false; } this.options = $.extend({}, this.defaults, options); if(this.options.showTree){ this.options.showNumCol = false; } this.gridCompColumnArr = new Array(); // 存储设置默认值之后的columns对象 this.gridCompColumnFixedArr = new Array(); // 存储设置默认值之后的固定列columns对象 this.basicGridCompColumnArr = new Array(); // 存储基本的columns对象,用于清除设置 this.gridCompLevelColumn = new Array(); // 存储多级表头时的多级 this.treeLeft = 10; // 树表时每一级之间的差值 this.multiSelectWidth = 40; // 复选框列宽度 this.numWidth = 40; // 数字列宽度 this.multiWidth = 40; // 复选框宽度 this.headerHeight = 34; // header区域高度 this.headerHeight = 34 * parseInt(this.options.maxHeaderLevel); this.countContentHeight = true;// 是否计算内容区的高度(是否为流式) this.minColumnWidth = 80; // 最小列宽 this.columnMenuWidth = 160; // column menu的宽度 this.scrollBarHeight = 16; // 滚动条高度 this.columnMenuHeight = 33; this.initGrid(); }; /* * 对象提供的方法 */ gridComp.prototype = { /* * 创建grid */ initGrid: function() { var oThis = this; this.initOptions(); this.initVariable(); this.initWidthVariable(); this.initGridCompColumn(); this.initDataSource(); this.createDivs(); // UAP-NC 轻量化项目:切换tab时添加form会消失问题 this.inte = setInterval(function(){oThis.setIntervalFun.call(oThis)}, 300); }, destroySelf: function(){ clearInterval(this.inte); this.$ele.data('gridComp',null); this.ele.innerHTML = ''; }, /* * 对传入参数进行格式化处理 * 宽度、高度处理 * 左侧区域宽度计算 * 除去内容区域的高度 */ initOptions: function() { this.options.width = this.formatWidth(this.options.width); this.options.height = this.formatWidth(this.options.height); if(this.options.height == '100%' || !this.options.height){ this.countContentHeight = false; } this.leftW = 0; // 左侧区域宽度(数字列复选框等) if (this.options.showNumCol) { this.leftW += this.numWidth; } if(this.options.multiSelect){ this.leftW += this.multiWidth; } this.exceptContentHeight = 0; // 内容区域之外的高度 if(this.options.showHeader){ this.exceptContentHeight +=this.headerHeight; } // 缓存id var url = window.location.href; var index = url.indexOf('?'); if(index > 0){ url = url.substring(0,index); } this.localStorageId = this.options.id + url; }, /* * 初始化变量 */ initVariable:function(){ this.initDataSourceVariable(); // 鼠标点击移动时位置记录 this.mouseUpX = 'mouseUpX'; this.mouseUpY = 'mouseUpY'; this.mouseDownX = 'mouseDownX'; this.mouseDownY = 'mouseDownY'; this.mouseMoveX = 'mouseMoveX'; this.mouseMoveY = 'mouseMoveY'; this.scrollLeft = 0; // 记录横向滚动条 this.scrollTop = 0;// 记录纵向滚动条 this.showType = ''; // 记录grid显示方式,form和grid this.createGridFlag = false; // 是否已经创建grid展示 this.createFormFlag = false; // 是否已经创建form展示 this.columnClickX = 0; // 点击处的X坐标 this.columnClickY = 0; // 点击处的Y坐标 this.$sd_storageData = null;// 本地缓存内容为object this.columnMenuMove = false;// 是否在column menu区域移动 this.createColumnMenuFlage = false; this.firstColumn = true; // 用于记录是否已经存在第一列,true表示还没有,false表示已经存在 this.lastVisibleColumn = null; this.lastVisibleColumnWidth = 0; this.menuColumnsHeight = 0; }, /* * 初始化datasource相关变量 */ initDataSourceVariable:function(){ this.selectRows = new Array(); this.selectRowsObj = new Array(); this.selectRowsIndex = new Array(); this.allRows = new Array(); this.eidtRowIndex = -1; // 当前修改行 }, // 初始化宽度相关变量 initWidthVariable:function(){ // 计算用变量 this.wholeWidth = 0; // 整体宽度 this.wholeHeight = 0; // 整体高度 this.rowHeight = 0; // 数据行高度 this.fixedRealWidth = 0; // 固定区域真实宽度 this.fixedWidth = 0; // 固定区域宽度 this.contentRealWidth = 0; // 内容区真实宽度,严格按照设置的width计算的宽度 this.contentWidth = 0; // 内容区宽度,自动扩展之后的宽度 this.contentMinWidth = 0; // 内容区最小宽度,即可视宽度 this.contentHeight = 0; //内容区高度 }, /* * 创建gridCompColumn对象方便后续处理 */ initGridCompColumn: function() { var oThis = this; oThis.gridCompColumnFixedArr = new Array(); if (this.options.columns) { $.each(this.options.columns, function(i) { if(!(this.headerLevel > 1)){ var column = new gridCompColumn(this, oThis.options); oThis.gridCompColumnArr.push(column); var column1 = new gridCompColumn(this, oThis.options); oThis.basicGridCompColumnArr.push(column1); }else{ oThis.gridCompLevelColumn.push(this); } }); } var localGridCompColumnArr = this.getGridCompColumnArrFromLocal(); // 获取本地缓存中的数据 if(localGridCompColumnArr != null){ this.gridCompColumnArr = localGridCompColumnArr; $.each(this.gridCompColumnArr,function(){ var field = this.options.field; for(var i =0;i < oThis.options.columns.length;i++){ var c = oThis.options.columns[i]; if(c.field == field){ var options = $.extend({},c,this.options); this.options = options; break; } } }); } this.menuColumnsHeight = this.gridCompColumnArr.length * this.columnMenuHeight; this.initGridCompFixedColumn(); this.columnsVisibleFun(); }, setRequired: function(field, value){ var oThis = this; $.each(this.gridCompColumnArr,function(i){ if(this.options.field == field){ this.options.required = value; if(!value) { $('#' + oThis.options.id + '_edit_' + this.options.field).parent().find('.u-grid-edit-mustFlag').hide() } else { $('#' + oThis.options.id + '_edit_' + this.options.field).parent().find('.u-grid-edit-mustFlag').show() } } }); }, getLevelTitleByField:function(field){ for(var i = 0; i < this.gridCompLevelColumn.length; i++){ var columnField = this.gridCompLevelColumn[i].field; if(columnField == field){ return this.gridCompLevelColumn[i].title; } } return ''; }, /* * 将固定列放入gridCompColumnFixedArr */ initGridCompFixedColumn:function(){ var oThis = this; var w = 0; $.each(this.gridCompColumnArr,function(i){ if(this.options.fixed == true){ oThis.gridCompColumnFixedArr.push(this); } }); $.each(this.gridCompColumnFixedArr,function(i){ for(var i = oThis.gridCompColumnArr.length;i >-1;i-- ){ if(oThis.gridCompColumnArr[i] == this){ oThis.gridCompColumnArr.splice(i,1); break; } } }); }, /* * 创建dataSource对象方便后续处理 */ initDataSource: function() { var oThis = this; this.dataSourceObj = new dataSource(this.options.dataSource,this); }, /* * 创建顶层div以及_top div层 * 添加顶层div相关监听 */ createDivs: function() { var oThis = this; this.ele.innerHTML = ''; // 创建顶层div var styleStr = '',str = ''; if(this.options.width){ str += 'width:' + this.options.width + ';'; }else{ str += 'width:auto;'; } if(this.options.height){ str += 'height:' + this.options.height + ';'; }else{ str += 'height:auto;'; } if(str != ''){ styleStr = 'style="' + str + '"'; } var htmlStr = '<div id="' + this.options.id + '" data-role="grid" class="u-grid" ' + styleStr + '>'; htmlStr += '</div>'; this.ele.insertAdjacentHTML('afterBegin', htmlStr); // 创建屏幕div,用于拖动等操作 var htmlStr = '<div id="' + this.options.id + '_top" class="u-grid-top"></div>'; this.ele.insertAdjacentHTML('afterBegin', htmlStr); this.initEventFun(); //创建完成之后顶层div添加监听 this.widthChangeFun(); // 根据整体宽度创建grid或form展示区域 }, /* * 创建div区域 */ repaintDivs:function(){ // 后期可以考虑form展示 this.repaintGridDivs(); this.realtimeTableRows = null; }, /* * 创建grid形式下div区域 */ createGridDivs: function() { if (this.createGridFlag) { return; } // 为避免重复渲染,在开始清空里面内容 if($('#' + this.options.id)[0]) $('#' + this.options.id)[0].innerHTML = ''; var htmlStr = '<div id="' + this.options.id + '_grid" class="u-grid-grid">'; // if(this.options.showHeader){//由于可以动态修改showHeader,所以提前创建 htmlStr += this.createColumnMenu(); htmlStr += this.createHeader(); // } htmlStr += this.createContent(); // if(this.options.editable){ //由于可以动态修改editable,所以提前创建 // htmlStr += this.createContentEditMenu(); // } htmlStr += '</div>'; if($('#' + this.options.id)[0]) //$('#' + this.options.id)[0].insertAdjacentHTML('afterBegin', htmlStr); $('#' + this.options.id).html(htmlStr); this.headerFirstClassFun(); this.initGridEventFun(); this.afterGridDivsCreate(); this.createGridFlag = true; this.realtimeTableRows = null; }, /* * 重画grid */ repaintGridDivs: function() { $('#' + this.options.id + '_grid').remove(null, true); this.showType = ''; this.wholeWidth = 0; this.createGridFlag = false; this.columnsVisibleFun(); this.widthChangeFun(); this.realtimeTableRows = null; }, /* * 创建columnMenu区域 */ createColumnMenu: function() { var oThis = this; var htmlStr = '<div class="u-grid-column-menu" id="' + this.options.id + '_column_menu">'; htmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-ul" id="' + this.options.id + '_column_menu_ul">'; // 创建显示/隐藏列 htmlStr += '<li class="u-grid-column-menu-li" role="menuitem">'; htmlStr += '<div class="u-grid-column-menu-div1" id="' + this.options.id + '_showColumn">'; htmlStr += '<span class="u-grid-column-menu-span">' + this.transMap.ml_show_column + '</span>'; htmlStr += '<div class="u-grid-column-menu-div3 fa fa-caret-right"></div>'; htmlStr += '</div></li>'; // 创建清除设置 htmlStr += '<li class="u-grid-column-menu-li" role="menuitem">'; htmlStr += '<div class="u-grid-column-menu-div1" id="' + this.options.id + '_clearSet">'; htmlStr += '<span class="u-grid-column-menu-span">' + this.transMap.ml_clear_set + '</span>'; htmlStr += '</div></li>'; htmlStr += '</ul></div>'; // 创建数据列区域 htmlStr += '<div class="u-grid-column-menu-columns" id="' + this.options.id + '_column_menu_columns">'; htmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-columns-ul" id="' + this.options.id + '_column_menu_columns_ul">'; $.each(this.gridCompColumnArr, function(i) { if(oThis.getString(this.options.title,'') != ''){ htmlStr += '<li class="u-grid-column-menu-columns-li" role="menuitem" index="' + i + '">'; htmlStr += '<div class="u-grid-column-menu-columns-div1">'; var checkedStr = ""; if(this.options.visible) checkedStr = ' checked'; if(!this.options.canVisible) checkedStr += ' style="display:none;"'; htmlStr += '<div class="u-grid-column-menu-columns-div2"><input type="checkbox" ' + checkedStr + '></div>'; htmlStr += '<span class="u-grid-column-menu-columns-span">' + this.options.title + '</span>'; htmlStr += '</div></li>'; } }); htmlStr += '</ul></div>'; return htmlStr; }, /* * 创建header区域 */ createHeader: function() { var wrapStr = '' if(this.wholeWidth > 0){ // wrapStr = 'style="max-width:' + this.wholeWidth + 'px;"' } var headerShowStr = ''; if(!this.options.showHeader) headerShowStr = 'style="display:none;"'; var htmlStr = '<div class="u-grid-header" id="' + this.options.id + '_header" ' + headerShowStr + '><div class="u-grid-header-wrap" id="' + this.options.id + '_header_wrap" data-role="resizable" ' + wrapStr + '>'; if (this.options.multiSelect || this.options.showNumCol) { htmlStr += '<div id="' + this.options.id + '_header_left" class="u-grid-header-left" style="width:' + this.leftW + 'px;">'; if (this.options.multiSelect) { if(iweb.browser.isIE8){ htmlStr += '<div class="u-grid-header-multi-select" style="width:' + this.multiWidth + 'px;"><input class="u-grid-multi-input" type="checkbox" id="' + this.options.id + '_header_multi_input"></div>' }else{ htmlStr += '<div class="u-grid-header-multi-select checkbox check-success" style="width:' + this.multiWidth + 'px;"><input class="u-grid-multi-input" type="checkbox" id="' + this.options.id + '_header_multi_input"><label for="' + this.options.id + '_header_multi_input"></label></div>' } } if (this.options.showNumCol) { htmlStr += '<div class="u-grid-header-num" style="width:' + this.numWidth + 'px;"></div>'; } htmlStr += '</div>'; } htmlStr += this.createHeaderTable('fixed'); htmlStr += this.createHeaderTable(); htmlStr += '</div>'; htmlStr += '<div class="u-grid-header-resize-handle" id="' + this.options.id + '_resize_handle"><div class="u-grid-header-resize-handle-inner"></div></div>'; htmlStr += '</div>'; return htmlStr; }, /* * 创建header区域table */ createHeaderTable:function(createFlag){ var leftW,positionStr,idStr; if(createFlag == 'fixed'){ leftW = parseInt(this.leftW); positionStr = 'absolute;width:'+this.fixedWidth+'px;z-index:11;background:#F9F9F9;'; idStr = 'fixed_'; }else{ leftW = parseInt(this.leftW) + parseInt(this.fixedWidth); positionStr = 'relative;'; idStr = ''; if(this.contentMinWidth > 0){ positionStr += 'width:'+this.contentMinWidth+'px;'; } } var htmlStr = '<table role="grid" id="' + this.options.id + '_header_'+idStr+'table" style="position:'+ positionStr+';left:' + leftW + 'px">'; htmlStr += this.createColgroup(createFlag); htmlStr += '<thead role="rowgroup" id="' + this.options.id + '_header_'+idStr+'thead">'; htmlStr += this.createThead(createFlag); htmlStr += '</thead></table>'; return htmlStr; }, /* * 创建colgroup */ createColgroup: function(createFlag) { var oThis = this, htmlStr = '<colgroup>',gridCompColumnArr; if(createFlag == 'fixed'){ gridCompColumnArr = this.gridCompColumnFixedArr; }else{ gridCompColumnArr = this.gridCompColumnArr; } $.each(gridCompColumnArr, function() { if(this.options.visible){ htmlStr += '<col'; htmlStr += ' style="width:' + oThis.formatWidth(this.options.width) + '"'; htmlStr += '>'; } }); htmlStr += '</colgroup>'; return htmlStr; }, /* * 创建thead区域 */ createThead: function(createFlag) { var oThis = this; var visibleIndex = 0; var gridCompColumnArr; var trStyle = ''; if(this.options.maxHeaderLevel >1){ trStyle = 'style="height:' + this.headerHeight + 'px;"'; } var htmlStr = '<tr role="row" ' + trStyle + '>'; if(createFlag == 'fixed'){ gridCompColumnArr = this.gridCompColumnFixedArr; }else{ gridCompColumnArr = this.gridCompColumnArr; } $.each(gridCompColumnArr, function(i) { var vi = visibleIndex; var displayStyle = ''; if(this.options.visible == false){ vi = -1; displayStyle = 'style="display:none;"'; }else{ visibleIndex++; } // 低版本浏览器不支持th position为relative,因此加入空div htmlStr += '<th role="columnheader" data-filed="' + this.options.field + '" rowspan="1" class="u-grid-header-th" ' + displayStyle + 'field="' + this.options.field + '" index="' + i + '" visibleIndex="' + vi + '"><div style="position:relative;">'; var colorStype = ''; if(this.options.headerColor){ colorStype = 'style="color:' + this.options.headerColor + '"'; } htmlStr += '<div class="u-grid-header-link" field="' + this.options.field + '" title="' + this.options.title + '" ' + colorStype + '>' + this.options.title + '</div>'; if(oThis.options.columnMenu && createFlag != 'fixed'){ // 创建右侧按钮图标 htmlStr += '<div class="u-grid-header-columnmenu fa fa-bars " field="' + this.options.field + '" style="display:none;"></div>'; } htmlStr += '</div></th>'; }); htmlStr += '</tr>'; return htmlStr; }, /* * 创建内容区域 */ createContent: function() { var h = '',displayStr = '',bottonStr=''; if(this.countContentHeight){ var wh = $('#' + this.options.id)[0].offsetHeight; this.wholeHeight = wh; if (wh > 0) { this.contentHeight = parseInt(wh) - this.exceptContentHeight > 0?parseInt(wh) - this.exceptContentHeight:0; if(this.contentHeight > 0){ h = 'style="max-height:' + this.contentHeight + 'px;"'; } } } var htmlStr = '<div id="' + this.options.id + '_content" class="u-grid-content" ' + h + '>'; if (this.options.showNumCol || this.options.multiSelect) { htmlStr += this.createContentLeft(); if(!(this.contentWidth > this.contentMinWidth)){ displayStr = 'display:none;'; bottonStr = 'bottom:0px;' } if(this.options.showSumRow){ htmlStr += '<div class="u-grid-content-left-sum-bottom" id="' + this.options.id + '_content_left_sum_bottom" style="width:' + (this.leftW + this.fixedWidth) + 'px;'+bottonStr+'">'; htmlStr += '</div>'; } htmlStr += '<div class="u-grid-content-left-bottom" id="' + this.options.id + '_content_left_bottom" style="width:' + (this.leftW + this.fixedWidth) + 'px;'+displayStr+'">'; htmlStr += '</div>'; } htmlStr += this.createContentTable('fixed'); htmlStr += this.createContentTable(); htmlStr += '</div>'; return htmlStr; }, /* * 创建内容区左侧区域 */ createContentLeft: function() { var oThis = this, htmlStr = "", left = 0; if(this.options.multiSelect){ htmlStr += '<div class="u-grid-content-left" id="' + this.options.id + '_content_multiSelect" style="width:' + this.multiSelectWidth + 'px;">'; // 遍历生成所有行 if (this.dataSourceObj.rows) { $.each(this.dataSourceObj.rows, function(i) { htmlStr += oThis.createContentLeftMultiSelectRow(this); }); } htmlStr += '</div>'; left += this.multiSelectWidth; } if (this.options.showNumCol) { htmlStr += '<div class="u-grid-content-left" id="' + this.options.id + '_content_numCol" style="width:' + this.numWidth + 'px;left:' + left + 'px;">'; // 遍历生成所有行 if (this.dataSourceObj.rows) { $.each(this.dataSourceObj.rows, function(i) { htmlStr += oThis.createContentLeftNumColRow(i); }); } htmlStr += '</div>'; } return htmlStr; }, /* * 创建内容区左侧区域复选区(一行) */ createContentLeftMultiSelectRow:function(row,displayFlag){ var displayStr = ''; if(!this.options.autoExpand && row.level > 0 && displayFlag != 'block'){ displayStr = 'display:none;' } var tmpcheck = row.value["$_#_@_id"] if(!tmpcheck) { tmpcheck = setTimeout(function(){}); } if(iweb.browser.isIE8){ var htmlStr = '<div style="width:' + this.multiSelectWidth + 'px;' + displayStr + '" class="u-grid-content-multiSelect " ><input class="u-grid-multi-input" id="checkbox'+tmpcheck+'" type="checkbox" value="1" ></div>' }else{ var htmlStr = '<div style="width:' + this.multiSelectWidth + 'px;' + displayStr + '" class="u-grid-content-multiSelect checkbox check-success" ><input class="u-grid-multi-input" id="checkbox'+tmpcheck+'" type="checkbox" value="1" ><label for="checkbox'+tmpcheck+'"></label></div>' } return htmlStr; }, /* * 创建内容区左侧区域数字列(一行) */ createContentLeftNumColRow:function(index){ var htmlStr = '<div style="width:' + this.numWidth + 'px;" class="u-grid-content-num">' + (index+1) + '</div>'; return htmlStr; }, /* * 创建内容区table */ createContentTable:function(createFlag){ var leftW,idStr,styleStr,hStr,cssStr,tableStyleStr; if(this.countContentHeight && parseInt(this.contentHeight) > 0){ hStr = 'max-height:' + this.contentHeight + 'px;'; }else{ hStr = ""; } if(createFlag == 'fixed'){ leftW = parseInt(this.leftW); idStr = 'fixed_'; cssStr = 'fixed-'; styleStr = 'style="position:absolute;width:'+this.fixedWidth+'px;left:' + leftW + 'px;' +hStr+'"'; tableStyleStr = 'style="width:'+this.fixedWidth+'px;"'; }else{ leftW = parseInt(this.leftW) + parseInt(this.fixedWidth); idStr = ''; cssStr = ''; styleStr = 'style="position:relative;left:' + leftW + 'px;' +hStr; if(this.contentMinWidth > 0){ styleStr += 'width:' + this.contentMinWidth + 'px;'; } styleStr += '"'; tableStyleStr = ''; if(this.contentMinWidth > 0){ if(this.contentWidth > 0){ tableStyleStr = 'style="min-width:' + this.contentMinWidth + 'px;width:' + this.contentWidth + 'px;"'; }else{ tableStyleStr = 'style="min-width:' + this.contentMinWidth + 'px;"'; } } } var htmlStr = '<div id="' + this.options.id + '_content_'+idStr+'div" class="u-grid-content-'+cssStr+'div" '+styleStr+'>'; htmlStr += '<div style="height:30px;position:absolute;top:-30px;width:100%;"></div><table role="grid" id="' + this.options.id + '_content_'+idStr+'table" ' + tableStyleStr+'>'; htmlStr += this.createColgroup(createFlag); htmlStr += '<thead role="rowgroup" id="' + this.options.id + '_content_'+idStr+'thead" style="display:none">'; htmlStr += this.createThead(createFlag); htmlStr += '</thead>'; htmlStr += this.createContentRows(createFlag); htmlStr += '</table>'; if(createFlag != 'fixed'){ htmlStr += this.createNoRowsDiv(); } htmlStr += '</div>'; return htmlStr; }, /* * 创建无数据区域 */ createNoRowsDiv:function(){ var styleStr = '',styleStr1 = ''; if(this.contentMinWidth > 0){ styleStr += 'style="width:' + this.contentMinWidth + 'px;"'; } if(this.contentWidth > 0){ styleStr1 += 'style="width:' + this.contentWidth + 'px;"'; } var htmlStr = '<div class="u-grid-noRowsDiv"' + styleStr1 + ' id="' + this.options.id + '_noRows"></div>'; htmlStr += '<div class="u-grid-noRowsShowDiv"' + styleStr + ' id="' + this.options.id + '_noRowsShow">' + this.transMap.ml_no_rows + '</div>'; return htmlStr; }, /* * 创建内容区域所有行 */ createContentRows: function(createFlag) { var oThis = this, htmlStr = "",idStr; if(createFlag == 'fixed'){ idStr = 'fixed_'; }else{ idStr = ''; } // 遍历生成所有行 if (this.dataSourceObj.rows) { htmlStr += '<tbody role="rowgroup" id="' + this.options.id + '_content_'+idStr+'tbody">'; $.each(this.dataSourceObj.rows, function(i) { htmlStr += oThis.createContentOneRow(this,createFlag); }); if(oThis.options.showSumRow && this.dataSourceObj.rows && this.dataSourceObj.rows.length > 0){ htmlStr += oThis.createSumRow(createFlag); } htmlStr += '</tbody>'; } return htmlStr; }, /* * 创建内容区域数据行 */ createContentOneRow: function(row,createFlag,displayFlag) { var styleStr = ''; if(!this.options.autoExpand && row.level > 0 && displayFlag != 'block'){ styleStr = 'style="display:none"'; } var htmlStr = '<tr role="row" ' + styleStr + '>'; htmlStr += this.createContentOneRowTd(row,createFlag); htmlStr += '</tr>'; return htmlStr; }, /* * 创建内容区域数据行,针对IE */ createContentOneRowForIE:function(table,index,rowObj,createFlag,displayFlag){ var row = table.insertRow(index + 1); //row.role = 'row'; row.setAttribute("role","row"); if(!this.options.autoExpand && row.level > 0 && displayFlag != 'block'){ row.style.display = 'none'; } this.createContentOneRowTdForIE(row,rowObj,createFlag); }, /* * 数据更新重画当前行 */ // repaintRow:function(tr,row,createFlag){ repaintRow:function(rowIndex){ var tr = $('#' + this.options.id + '_content_tbody').find('tr[role="row"]')[ rowIndex]; var fixedtr = $('#' + this.options.id + '_content_fixed_tbody').find('tr[role="row"]')[rowIndex]; var row = this.dataSourceObj.rows[rowIndex]; var $tr = $(tr); var index = this.getTrIndex($tr); if(iweb.browser.isIE8 || iweb.browser.isIE9){ var table = $('#' + this.options.id + '_content_table')[0]; var fixedtable = $('#' + this.options.id + '_content_fixed_table')[0]; //table.deleteRow(this.eidtRowIndex + 1); //fixedtable.deleteRow(this.eidtRowIndex + 1); this.createContentOneRowTdForIE(tr,row) this.createContentOneRowTdForIE(fixedtr,row,'fixed') }else{ tr.innerHTML = this.createContentOneRowTd(row); fixedtr.innerHTML = this.createContentOneRowTd(row,'fixed'); } var obj = {}; obj.begin = index; obj.length = 1; // obj.createFlag = createFlag; this.renderTypeFun(obj); }, /* * 创建行td对应的html */ createContentOneRowTd:function(row,createFlag){ var oThis = this; var htmlStr = '',gridCompColumnArr; if(createFlag == 'fixed'){ gridCompColumnArr = this.gridCompColumnFixedArr; }else{ gridCompColumnArr = this.gridCompColumnArr; } var value = row.value; $.each(gridCompColumnArr, function() { var f = this.options.field, v = $(value).attr(f); v = oThis.getString(v,''); // tianxq begin if($.type(v) == 'object') { v = v.showValue } // tianxq end var renderType = this.options.renderType; var treeStyle = ''; var spanStr =''; var iconStr = ''; var vStr= ''; var tdStyle = ''; if(oThis.options.showTree && this.firstColumn){ var l = parseInt(oThis.treeLeft)*parseInt(row.level); treeStyle = 'style="position:relative;'; if(row.hasChild){ if(oThis.options.autoExpand){ spanStr = '<span class=" fa fa-minus-square-o u-grid-content-tree-span"></span>'; }else{ spanStr = '<span class=" fa fa-plus-square-o u-grid-content-tree-span"></span>'; } }else{ l += 16; } treeStyle += 'left:'+ l +'px;"'; } if(!this.options.visible){ tdStyle = 'style="display:none;"'; } if(this.options.icon){ iconStr = '<span class="' + this.options.icon + '"></span>'; } // title="' + v + '" 创建td的时候不在设置title,在renderType中设置,处理现实xml的情况 htmlStr += '<td role="rowcell" '+ tdStyle +' title="' + v.replace(/\</g,'\<').replace(/\>/g,'\>') + '"><div class="u-grid-content-td-div" ' + treeStyle+'>' + spanStr + iconStr + '<span>' + v.replace(/\</g,'&lt;').replace(/\>/g,'&gt;') + '</span></div></td>'; }); return htmlStr; }, /* * 创建行td,针对IE */ createContentOneRowTdForIE:function(row,rowObj,createFlag){ var oThis = this,gridCompColumnArr; if(createFlag == 'fixed'){ gridCompColumnArr = this.gridCompColumnFixedArr; }else{ gridCompColumnArr = this.gridCompColumnArr; } var value = rowObj.value; $.each(gridCompColumnArr, function() { var f = this.options.field, v = $(value).attr(f); v = oThis.getString(v,''); // tianxq begin if($.type(v) == 'object') { v = v.showValue } // tianxq end var renderType = this.options.renderType; var treeStyle = ''; var spanStr =''; var iconStr = ''; var vStr= ''; var htmlStr = ''; var newCell= row.insertCell(); //newCell.row = 'rowcell'; newCell.setAttribute("role","rowcell"); newCell.title = v.replace(/\</g,'\<').replace(/\>/g,'\>'); if(oThis.options.showTree && this.firstColumn){ var l = parseInt(oThis.treeLeft)*parseInt(rowObj.level); treeStyle = 'style="position:relative;'; if(rowObj.hasChild){ if(oThis.options.autoExpand){ spanStr = '<span class=" fa fa-minus-square-o u-grid-content-tree-span"></span>'; }else{ spanStr = '<span class=" fa fa-plus-square-o u-grid-content-tree-span"></span>'; } }else{ l += 18; } treeStyle += 'left:'+ l +'px;"'; } if(!this.options.visible){ newCell.style.display="none"; } if(this.options.icon){ iconStr = '<span class="' + this.options.icon + '"></span>'; } htmlStr += '<div class="u-grid-content-td-div" ' + treeStyle+'>' + spanStr + iconStr + '<span>' + v.replace(/\</g,'&lt;').replace(/\>/g,'&gt;') + '</span></div>'; newCell.insertAdjacentHTML('afterBegin',htmlStr); }); }, /* * 创建合计行 */ createSumRow:function(createFlag){ if(this.options.showSumRow){ var oThis = this,idStr,gridCompColumnArr; if(createFlag == 'fixed'){ idStr = 'fixed_'; gridCompColumnArr = this.gridCompColumnFixedArr; }else{ idStr = ''; gridCompColumnArr = this.gridCompColumnArr; } var t = parseInt(this.wholeHeight) - this.exceptContentHeight - 48 - this.scrollBarHeight; t = t> 0?t:0; var htmlStr = '<tr role="row" class="u-grid-content-sum-row" id="' + this.options.id + '_content_'+idStr+'sum_row" style="top:'+t+'px;">'; $.each(gridCompColumnArr, function() { var f = this.options.field; var sumValue = oThis.dataSourceObj.getSumValue(f,this,oThis); var tdStyle = ''; if(!this.options.visible){ tdStyle = 'style="display:none;"'; } htmlStr += '<td role="rowcell" title="' + sumValue + '" ' + tdStyle + '>'; if(this.firstColumn){ htmlStr += '<div class="u-gird-centent-sum-div"><span>' + oThis.transMap.ml_sum + '</span></div>'; } var contentStyle = ''; if(this.options.dataType == 'integer' || this.options.dataType == 'float') { contentStyle = 'style="text-align: right;"' } htmlStr += '<div class="u-grid-content-td-div" ' + contentStyle + '><span>' + sumValue + '</span></div></td>'; }); htmlStr += '</tr>'; return htmlStr; } }, /* * 创建合计行 for ie */ createSumRowForIE:function(table,createFlag){ if(this.options.showSumRow){ var oThis = this,idStr,gridCompColumnArr; if(createFlag == 'fixed'){ idStr = 'fixed_'; gridCompColumnArr = this.gridCompColumnFixedArr; }else{ idStr = ''; gridCompColumnArr = this.gridCompColumnArr; } var t = parseInt(this.wholeHeight) - this.exceptContentHeight - 48 - this.scrollBarHeight; t = t> 0?t:0; var row = table.insertRow(); row.row = 'row'; row.className = 'u-grid-content-sum-row'; row.id = this.options.id + '_content_'+idStr+'sum_row'; row.style.top = t + 'px'; $.each(gridCompColumnArr, function() { var f = this.options.field; var sumValue = oThis.dataSourceObj.getSumValue(f,this,oThis); var newCell= row.insertCell(); newCell.role = 'rowcell'; newCell.title = sumValue; var contentStyle = ''; if(this.options.dataType == 'integer' || this.options.dataType == 'float') { contentStyle = 'style="text-align: right;"' } var htmlStr = '<div class="u-grid-content-td-div" ' + contentStyle + '><span>' + sumValue + '</span></div>'; newCell.insertAdjacentHTML('afterBegin',htmlStr); }); } }, /* * 重画合计行 */ repairSumRow:function(){ if(this.options.showSumRow){ $('#' + this.options.id + '_content_div tbody .u-grid-content-sum-row').remove(); $('#' + this.options.id + '_content_fixed_div tbody .u-grid-content-sum-row').remove(); try{ if(this.dataSourceObj.rows && this.dataSourceObj.rows.length > 0){ var htmlStr = this.createSumRow(); $('#' + this.options.id + '_content_div tbody')[0].insertAdjacentHTML('beforeEnd',htmlStr); var htmlStr = this.createSumRow('fixed'); $('#' + this.options.id + '_content_fixed_div tbody')[0].insertAdjacentHTML('beforeEnd',htmlStr); } }catch(e){ var table = $('#' + this.options.id + '_content_div table')[0]; var fixedTable = $('#' + this.options.id + '_content_fixed_div table')[0]; this.createSumRowForIE(table); this.createSumRowForIE(table,'fixed'); } } }, /* * 重画内容区域 */ repairContent: function(){ var $pDiv = $('#' + this.options.id + '_content').parent(); $('#' + this.options.id + '_content').remove(null, true); if($pDiv[0]){ var htmlStr = this.createContent(); $pDiv[0].insertAdjacentHTML('beforeEnd', htmlStr); this.renderTypeFun(); this.initContentDivEventFun(); if($('#' + this.options.id + '_content_div')[0]){ $('#' + this.options.id + '_content_div')[0].scrollLeft = this.scrollLeft; } $('#' +this.options.id + '_content_edit_menu').css('display','none'); } this.realtimeTableRows = null; }, /* * 创建form形式下div */ createFromDivs: function() { if (this.createFormFlag) { return; } var htmlStr = '<div id="' + this.options.id + '_form" class="u-grid-form">'; htmlStr += this.createFromContent(); $('#' + this.options.id)[0].insertAdjacentHTML('afterBegin', htmlStr); this.createFormFlag = true; }, /* * 创建form形式下内容区域 */ createFromContent: function() { var htmlStr = '<div class="u-grid-form-content" id="' + this.options.id + '_form_content" class="u-grid-content">'; htmlStr += '<table role="grid" id="' + this.options.id + '_form_content_table">'; htmlStr += this.createFormContentRows(); htmlStr += '</table>'; return htmlStr; }, /* * 创建form形式下内容区域所有行 */ createFormContentRows: function() { var oThis = this, htmlStr = ""; // 遍历生成所有行 if (this.dataSourceObj.rows) { htmlStr += '<tbody role="rowgroup" id="' + this.options.id + '_form_content_tbody">'; $.each(this.dataSourceObj.rows, function() { htmlStr += '<tr role="row"><td role="rowcell">'; var value = this.value; $.each(oThis.gridCompColumnArr, function() { var f = this.options.field, t = this.options.title, v = $(value).attr(f); htmlStr += '<div>' + t + ':</div>'; htmlStr += '<div>' + v + '</div>'; }); htmlStr += '</td></tr>'; }); htmlStr += '</tbody>'; } return htmlStr; }, /* * 创建完成之后顶层div添加监听 */ initEventFun: function() { var oThis = this; $('#' + this.options.id).on('mousedown', function(e) { if ($(e.target).closest('#' + oThis.options.id + '_header').length > 0) { // 点击的是header区域 oThis.mouseDownX = e.clientX; oThis.mouseDownY = e.clientY; var eleTh = $(e.target).closest('th')[0]; if(oThis.canSwap){ oThis.swapColumnStart(e, eleTh); } e.preventDefault(); } else if ($(e.target).closest('#' + oThis.options.id + '_content').length > 0) { // 点击的是数据区域 } }); $('#' + this.options.id).on('mousemove', function(e) { // if (!oThis.countWidthFlag) { // oThis.countWidth(e); //某些情况下不是创建完就显示的,所以在mousemove中处理 // oThis.countWidthFlag = true; // } if ($(e.target).closest('#' + oThis.options.id + '_header').length > 0) { // 在header区域移动 var eleTh = $(e.target).closest('th')[0]; // 将其他列的操作按钮隐藏,显示当前列的 oThis.headerThDrag(e, eleTh); } oThis.mouseMoveX = e.clientX; oThis.mouseMoveY = e.clientY; if ((oThis.mouseMoveX != oThis.mouseDownX || oThis.mouseDownY != oThis.mouseMoveY) && oThis.mouseDownX != 'mouseDownX' && oThis.canSwap) { // 鼠标按下之后移动了 oThis.swapColumnFlag = true; } oThis.dragFun(e); oThis.swapColumnFun(e); e.stopPropagation(); }); $('#' + this.options.id + '_top').on('mousemove', function(e) { oThis.mouseMoveX = e.clientX; oThis.mouseMoveY = e.clientY; if ((oThis.mouseMoveX != oThis.mouseDownX || oThis.mouseDownY != oThis.mouseMoveY) && oThis.mouseDownX != 'mouseDownX' && oThis.canSwap) { // 鼠标按下之后移动了 oThis.swapColumnFlag = true; } oThis.dragFun(e); oThis.swapColumnFun(e); e.stopPropagation(); }); $('#' + this.options.id).on('mouseup', function(e) { if ($(e.target).closest('#' + oThis.options.id + '_header').length > 0) { // 点击的是header区域 oThis.mouseUpX = e.clientX; oThis.mouseUpY = e.clientY; //点击过程中鼠标没有移动 if (oThis.mouseDownX == oThis.mouseUpX && oThis.mouseDownY == oThis.mouseUpY) { //或者移动距离小于5px(由于移动之后会显示屏幕div,暂时不做处理) // if( Math.abs(parseInt(oThis.mouseDownX) - parseInt(oThis.mouseUpX)) <=5 && Math.abs(parseInt(oThis.mouseDownY) - parseInt(oThis.mouseUpY)) <=5){ oThis.columnClickX = e.clientX; oThis.columnClickY = e.clientY; var eleTh = $(e.target).closest('th')[0]; if($(e.target).hasClass('u-grid-header-columnmenu')){ //点击的是columnmenu $('#' + oThis.options.id + '_column_menu').css('display','block'); var left = eleTh.attrRightTotalWidth - oThis.scrollLeft + oThis.leftW + oThis.fixedWidth - 20; if(left + oThis.columnMenuWidth > oThis.wholeWidth) left = eleTh.attrRightTotalWidth - oThis.scrollLeft + oThis.leftW + oThis.fixedWidth - oThis.columnMenuWidth + 1; $('#' + oThis.options.id + '_column_menu').css('left',left); $('#' + oThis.options.id + '_column_menu').css('top',oThis.headerHeight); oThis.ele.createColumnMenuFlage = true; }else{ // 执行click操作,进行排序 oThis.canSortable(e, eleTh); } } } else if ($(e.target).closest('#' + oThis.options.id + '_content').length > 0) { // 点击的是数据区域 } oThis.dragEnd(e); oThis.swapColumnEnd(e); oThis.mouseUpX = 'mouseUpX'; oThis.mouseUpY = 'mouseUpY'; oThis.mouseDownX = 'mouseDownX'; oThis.mouseDownY = 'mouseDownY'; oThis.mouseMoveX = 'mouseMoveX'; oThis.mouseMoveY = 'mouseMoveY'; }); $('#' + this.options.id+ '_top').on('mouseup', function(e) { oThis.dragEnd(e); oThis.swapColumnEnd(e); oThis.mouseUpX = 'mouseUpX'; oThis.mouseUpY = 'mouseUpY'; oThis.mouseDownX = 'mouseDownX'; oThis.mouseDownY = 'mouseDownY'; oThis.mouseMoveX = 'mouseMoveX'; oThis.mouseMoveY = 'mouseMoveY'; }); $(document).on('click',function(){ if(oThis.columnMenuMove == false && oThis.ele.createColumnMenuFlage == false){ $('#' + oThis.options.id + '_column_menu',oThis.$ele).css('display','none'); } oThis.ele.createColumnMenuFlage = false; }); }, /* * 创建完成之后grid层 div添加监听 */ initGridEventFun: function() { var oThis = this; // 拖动 $('#' + this.options.id + '_resize_handle').on('mousedown', function(e) { oThis.dragStart(e); return false; }); // 列头按钮显示/隐藏 $('#' + this.options.id + '_header_table th').on('mousemove',function(e){ $('.u-grid-header-columnmenu',$(this)).css('display','block'); }); $('#' + this.options.id + '_header_table th').on('mouseout',function(e){ $('.u-grid-header-columnmenu',$(this)).css('display','none'); }); this.initContentDivEventFun(); // 全选 $('#' + this.options.id + '_header_multi_input').on('click', function(e) { if(this.checked){ oThis.setAllRowSelect(); }else{ oThis.setAllRowUnSelect(); } }); /*header 按钮处理开始*/ // column按钮 $('#' + this.options.id + '_column_menu_ul').on('mousemove', function(e) { oThis.columnMenuMove = true; }); $('#' + this.options.id + '_column_menu_ul').on('mouseout', function(e) { oThis.columnMenuMove = false; }); // 显示/隐藏列按钮 $('#' + this.options.id + '_showColumn').on('mousemove', function(e) { //待完善 考虑屏幕高度决定columnMenu显示形式 if(oThis.hideMenuColumns) clearTimeout(oThis.hideMenuColumns); if($('#' + oThis.options.id + '_column_menu_columns').css('display') == 'block') return; var sX = $(window).width(); var sH = $(window).height(); var menuLeft = $('#' + oThis.options.id + '_column_menu').css('left'); var columnsLeft = parseInt(menuLeft) + oThis.columnMenuWidth; var maxLeft = oThis.columnClickX + oThis.columnMenuWidth * 2; if(maxLeft > sX) columnsLeft = parseInt(menuLeft) - oThis.columnMenuWidth; $('#' + oThis.options.id + '_column_menu_columns').css('left',columnsLeft); var columnsTop = oThis.headerHeight; var cY = e.clientY; // 如果数据列高度高于屏幕高度则数据列高度设置为屏幕高度-10; var columnsHeight = oThis.menuColumnsHeight; var hh = 0; if((oThis.menuColumnsHeight + 30) > sH){ columnsHeight = sH - 30; $('#' + oThis.options.id + '_column_menu_columns').css('height',columnsHeight + 'px'); }else{ $('#' + oThis.options.id + '_column_menu_columns').css('height',''); } var maxHeight = cY + columnsHeight; if(maxHeight > sH) columnsTop = (cY - (sH - columnsHeight)) * -1 + 30; $('#' + oThis.options.id + '_column_menu_columns').css('top',columnsTop); $('#' + oThis.options.id + '_column_menu_columns').css('display','block'); oThis.columnMenuMove = true; }); $('#' + this.options.id + '_showColumn').on('mouseout', function(e) { oThis.hideMenuColumns = setTimeout(function(){ $('#' + oThis.options.id + '_column_menu_columns').css('display','none'); oThis.columnMenuMove = false; },200); }); $('#' + this.options.id + '_column_menu_columns').on('mousemove', function(e) { if(oThis.hideMenuColumns) clearTimeout(oThis.hideMenuColumns); $('#' + oThis.options.id + '_column_menu_columns').css('display','block'); oThis.columnMenuMove = true; }); $('#' + this.options.id + '_column_menu_columns').on('mouseout', function(e) { oThis.hideMenuColumns = setTimeout(function(){ $('#' + oThis.options.id + '_column_menu_columns').css('display','none'); oThis.columnMenuMove = false; },200); }); // 清除设置按钮 $('#' + this.options.id + '_clearSet').on('click', function(e) { oThis.clearLocalData(); oThis.initGridCompColumn(); // 清除排序 oThis.dataSourceObj.sortRows(); oThis.repaintGridDivs(); if(typeof oThis.options.onClearSetFun == 'function'){ oThis.options.onClearSetFun(oThis); } }); // 显示/隐藏列 对应所有列的点击处理 $('#' + this.options.id + '_column_menu_columns_ul li input').on('click', function(e) { //待完善 优化与li的click的代码整合 var index = $(this).closest('li').attr('index'); if(oThis.gridCompColumnArr[index].options.visible){ $(this)[0].checked = false; var ll = $('input:checked',$('#' + oThis.options.id + '_column_menu_columns_ul')).length; if(ll == 0){ $(this)[0].checked = true; return; } if(document.documentMode == 8){ oThis.gridCompColumnArr[index].options.visible = false; oThis.repaintGridDivs(); }else{ oThis.setColumnVisibleByIndex(index,false); oThis.gridCompColumnArr[index].options.visible = false; } }else{ $(this)[0].checked = true; if(document.documentMode == 8){ oThis.gridCompColumnArr[index].options.visible = true; oThis.repaintGridDivs(); }else{ oThis.setColumnVisibleByIndex(index,true); oThis.gridCompColumnArr[index].options.visible = true; } } oThis.saveGridCompColumnArrToLocal(); e.stopPropagation(); }); $('#' + this.options.id + '_column_menu_columns_ul li').on('click', function(e) { var index = $(this).attr('index'); var gridCompColumn = oThis.gridCompColumnArr[index]; if(!gridCompColumn.options.canVisible){ return false; } //获取选中列数量,不能小于1 if(gridCompColumn.options.visible){ $('input',$(this))[0].checked = false; var ll = $('input:checked',$('#' + oThis.options.id + '_column_menu_columns_ul')).length; if(ll == 0){ $('input',$(this))[0].checked = true; return; } oThis.setColumnVisibleByIndex(index,false); oThis.gridCompColumnArr[index].options.visible = false; }else{ $('input',$(this))[0].checked = true; oThis.setColumnVisibleByIndex(index,true); oThis.gridCompColumnArr[index].options.visible = true; } oThis.saveGridCompColumnArrToLocal(); }); /*header 按钮处理结束*/ // 行编辑按钮相关事件 /*$('#' + this.options.id + '_content_edit_menu_ok').on('click',function(e){ oThis.editOk(); }); $('#' + this.options.id + '_content_edit_menu_cancel').on('click',function(e){ oThis.editCancel(); });*/ }, /* * 内容区 div添加监听 */ initContentDivEventFun:function(){ var oThis = this; // 通过复选框设置选中行 $('#' + oThis.options.id + '_content .u-grid-content-left').on('click',function(e){ var $input = $(e.target).closest('input'); if($input.length > 0){ var $div = $($input.parent()); var index = $('.u-grid-content-multiSelect',$div.parent()).index($div); if($input[0].checked){ oThis.setRowSelect(index); }else{ oThis.setRowUnselect(index); } } }); // 同步滚动条 $('#' + this.options.id + '_content_div').on('scroll', function(e) { oThis.scrollLeft = this.scrollLeft; oThis.scrollTop = this.scrollTop; $('#' + oThis.options.id + '_header_table').css('left', oThis.leftW - oThis.scrollLeft + oThis.fixedWidth + "px"); $('#' + oThis.options.id + '_noRowsShow').css('left', oThis.scrollLeft + "px"); $('#' + oThis.options.id + '_edit_form').css('left', oThis.scrollLeft + "px"); $('#' + oThis.options.id + '_content_multiSelect').css('top', -oThis.scrollTop + "px"); $('#' + oThis.options.id + '_content_numCol').css('top', -oThis.scrollTop + "px"); $('#' + oThis.options.id + '_content_fixed_div').css('top', -oThis.scrollTop + "px"); }); // 数据行相关事件 $('#' + this.options.id + '_content_tbody').on('click',function(e){ // 双击处理 if(typeof oThis.options.onDblClickFun == 'function'){ oThis.isDblEvent('tbodyClick',oThis.dblClickFun,e,oThis.clickFun,e); }else{ oThis.clickFun(e); } }); $('#' + this.options.id + '_content_fixed_tbody').on('click',function(e){ // 双击处理 if(typeof oThis.options.onDblClickFun == 'function'){ oThis.isDblEvent('tbodyClick',oThis.dblClickFun,e,oThis.clickFun,e); }else{ oThis.clickFun(e); } }); $('#' + this.options.id + '_content_tbody').on('mousemove', function(e) { var $tr = $(e.target).closest('tr'); // 首先清除所有的背景 $('#' + oThis.options.id + '_content_tbody').find('tr').removeClass('u-grid-move-bg'); $('#' + oThis.options.id + '_content_fixed_tbody').find('tr').removeClass('u-grid-move-bg'); if(oThis.options.multiSelect) $('#' + oThis.options.id + '_content_multiSelect').find('div').removeClass('u-grid-move-bg'); if(oThis.options.showNumCol) $('#' + oThis.options.id + '_content_numCol').find('div').removeClass('u-grid-move-bg'); if($tr[0].id && $tr[0].id == oThis.options.id + '_edit_tr'){ return; } if($tr.length > 0){ var mousemoveIndex = $('tr',$tr.parent()).index($tr); $('#' + oThis.options.id + '_content_tbody').find('tr').eq(mousemoveIndex).addClass('u-grid-move-bg'); $('#' + oThis.options.id + '_content_fixed_tbody').find('tr').eq(mousemoveIndex).addClass('u-grid-move-bg'); if(oThis.options.multiS