nuijs
Version:
nui框架
1,103 lines (1,056 loc) • 77.7 kB
JavaScript
Nui.define(function(require){
this.imports('../assets/components/datagrid/index');
var component = require('../core/component');
var util = require('../core/util');
var paging = require('./paging');
//获取滚动条宽度
var scrollBarWidth = (function(){
var oldWidth, newWidth, div = document.createElement('div');
div.style.cssText = 'position:absolute; top:-10000em; left:-10000em; width:100px; height:100px; overflow:hidden; padding:0; margin:0; box-sizing:content-box;';
oldWidth = document.body.appendChild(div).clientWidth;
div.style.overflowY = 'scroll';
newWidth = div.clientWidth;
document.body.removeChild(div);
return oldWidth - newWidth;
})()
return this.extend(component, {
_static:{
_init:function(){
var self = this;
Nui.doc.on('click', function(e){
Nui.each(self.__instances, function(val){
if(val.element && val.activeElem && !val.activeElem.hasClass('s-hover')){
val._callback('CancelActive', [val.activeElem])
Nui.each(val._rowElems, function(v){
v[val.activeIndex] && v[val.activeIndex].removeClass('s-crt')
})
delete val.activeElem;
delete val.activeIndex;
}
})
});
var timer = null;
var width = Nui.win.width();
Nui.win.on('resize', function(){
clearTimeout(timer);
timer = setTimeout(function(){
Nui.each(self.__instances, function(val){
if(val.element && val.element.is(':visible')){
if(val._options.height === '100%'){
val.resize()
}
var _width = Nui.win.width();
if(width !== _width){
val._splitWidth()
val._setScrollClassName();
}
width = _width
}
})
}, 80)
})
},
_hasChildren:function(value){
return Nui.isArray(value.children) && value.children.length
},
_colspan:function(array, count){
var self = this;
if(count === undefined){
count = 0
}
Nui.each(array, function(v){
if(self._hasChildren(v)){
count += self._colspan(v.children)
}
else{
count += 1
}
})
return count
}
},
_options:{
container:null,
data:null,
columns:null,
rowHeight:36,
renderCount:20,
preloadCount:10,
isFixed:true,
isActive:true,
isBorder:true,
isPaging:true,
isDir:false,
isDrag:false,
isInitCheckradio:true,
isLazyload:false,
isColgroup:true,
isFixedHeight:false,
keyCode:[9, 13],
option:null,
url:null,
paging:null,
fields:null,
storageKey:null,
dataField:'list',
width:'100%',
height:'100%',
footer:'',
placeholder:'',
onFocusin:null,
onFocusout:null,
onFocus:null,
onBlur:null,
filterQuery:null,
stringify:null,
rowRender:null,
colRender:null,
onActive:null,
onCancelActive:null,
onRowRender:null,
onRowClick:null,
onRowDblclick:null,
onCheckboxChange:null,
onRender:null,
onRenderBefore:null,
onScroll:null
},
_template:{
layout:
'<div class="<% className %>">'+
'<div class="datagrid-body<%if isFixed%> datagrid-fixed<%/if%><%if isDrag%> datagrid-drag<%/if%>">'+
'<%include "table"%>'+
'</div>'+
'<%if footer || paging%>'+
'<div class="datagrid-foot">'+
'<%if footer%>'+
'<%footer%>'+
'<%/if%>'+
'<%if paging%>'+
'<div class="datagrid-paging"></div>'+
'<%/if%>'+
'</div>'+
'<%/if%>'+
'</div>',
table:
'<%each rows v k%>'+
'<%if v.length%>'+
'<div class="datagrid-table<%if k === "left" || k === "right"%> datagrid-table-fixed<%/if%> datagrid-table-<%k%>">'+
'<%if !isFixed%>'+
'<div class="datagrid-box">'+
'<div class="datagrid-tablewrap">'+
'<table class="ui-table<%if !isBorder%> ui-table-nobd<%/if%>">'+
'<%include "thead"%>'+
'<tbody class="table-tbody datagrid-tbody"></tbody>'+
'</table>'+
'</div>'+
'</div>'+
'<%else%>'+
'<div class="datagrid-title">'+
'<div class="datagrid-thead">'+
'<table class="ui-table<%if !isBorder%> ui-table-nobd<%/if%>">'+
'<%include "thead"%>'+
'</table>'+
'</div>'+
'</div>'+
'<div class="datagrid-box">'+
'<div class="datagrid-tablewrap">'+
'<table class="ui-table<%if !isBorder%> ui-table-nobd<%/if%>">'+
'<%if isColgroup%>'+
'<%include "colgroup"%>'+
'<%/if%>'+
'<tbody class="table-tbody datagrid-tbody"></tbody>'+
'</table>'+
'</div>'+
'</div>'+
'<%/if%>'+
'</div>'+
'<%/if%>'+
'<%/each%>',
colgroup:
'<colgroup>'+
'<%each cols[k] col i%>'+
'<col cellid="<%col.cellid%>"'+
'<%if col.width%> '+
'<%var colWidth = storageWidth[col.cellid] || col.width%>'+
'width="<%colWidth%>" default-width="<%colWidth%>"'+
'<%/if%>'+
'<%if col.minWidth > 0%> min-width="<%col.minWidth%>"<%/if%>'+
'<%if col.maxWidth > 0%> max-width="<%col.maxWidth%>"<%/if%>'+
'<%if col.empty%> empty="1"<%/if%>'+
'<%if col.nodrag%> nodrag="1"<%/if%>'+
'>'+
'<%/each%>'+
'</colgroup>',
thead:
'<%include "colgroup"%>'+
'<thead class="table-thead">'+
'<%each v%>'+
'<tr class="table-row">'+
'<%var cellLastIndex = $value.length-1%>'+
'<%each $value val key%>'+
'<%var isTitle = true%>'+
'<%var _classNames = val.className%>'+
'<%if typeof _classNames === "function"%>'+
'<%if _classNames = Nui.trim(val.className()||"")%>'+
'<%var _classNames = " " + _classNames%>'+
'<%/if%>'+
'<%/if%>'+
'<th class="table-cell<%_classNames||""%> table-cell-<%key%><%if $index === 0 && cellLastIndex === key%> table-cell-last<%/if%><%if val.empty%> table-cell-empty<%/if%>"<%include "attr"%>>'+
'<%if isDrag && !val.empty && !val.nodrag && ($index !== 0 || cellLastIndex !== key || k === "left" || k === "right")%><b class="table-cell-drag-line"></b><%/if%>'+
'<%if !val.empty%>'+
'<span class="cell-wrap">'+
'<span class="cell-text">'+
'<%if val.title%>'+
'<%val.title%>'+
'<%if typeof val.order === "object"%>'+
'<%var asc = Nui.type(val.order.asc, ["String", "Number"]), desc = Nui.type(val.order.desc, ["String", "Number"])%>'+
'<em class="datagrid-order<%if asc && desc%> datagrid-order-both<%/if%>" field="<%val.order.field%>">'+
'<%if asc%>'+
'<b class="datagrid-order-asc" type="asc" value="<%val.order.asc%>"><i></i><s></s></b>'+
'<%/if%>'+
'<%if desc%>'+
'<b class="datagrid-order-desc" value="<%val.order.desc%>"><i></i><s></s></b>'+
'<%/if%>'+
'</em>'+
'<%/if%>'+
'<%elseif val.content === "checkbox"%>'+
'<span class="ui-checkradio">'+
'<input type="checkbox" name="datagrid-checkbox-all" class="datagrid-checkbox datagrid-checkbox-choose">'+
'</span>'+
'<%/if%>'+
'</span>'+
'</span>'+
'<%/if%>'+
'</th>'+
'<%/each%>'+
'</tr>'+
'<%/each%>'+
'</thead>',
cols:
'<%var colLastIndex = cols.length-1%>'+
'<%each cols val key%>'+
'<%var _value%>'+
'<%if val.field && (!val.content || "number checkbox input".indexOf(val.content)===-1)%>'+
'<%var _value=$value[val.field]%>'+
'<%elseif val.content === "number"%>'+
'<%var _value=$index+1%>'+
'<%elseif val.content === "checkbox"%>'+
'<%var _value={"name":val.field ? val.field : "datagrid-checkbox", "class":"datagrid-checkbox"+(!val.title ? " datagrid-checkbox-choose" : ""), "value":$value[val.field]!==undefined?$value[val.field]:""}%>'+
'<%elseif val.content === "input"%>'+
'<%var _value={"name":val.field ? val.field : "datagrid-input", "class":"datagrid-input", "value":$value[val.field]!==undefined?$value[val.field]:""}%>'+
'<%else%>'+
'<%var _value=val.content%>'+
'<%/if%>'+
'<%var _classNames = val.className%>'+
'<%if typeof _classNames === "function"%>'+
'<%if _classNames = Nui.trim(val.className(_value, val.field, $value, $index)||"")%>'+
'<%var _classNames = " " + _classNames%>'+
'<%/if%>'+
'<%/if%>'+
'<td class="table-cell<%_classNames||""%> table-cell-<%key%><%if colLastIndex === key%> table-cell-last<%/if%><%if val.empty%> table-cell-empty<%/if%>"<%include "attr"%>>'+
'<%if !val.empty%>'+
'<%if typeof val.filter === "function"%>'+
'<%var _value = val.filter(_value, val.field, $value, $index)%>'+
'<%/if%>'+
'<%var _isObject = typeof _value === "object"%>'+
'<span class="cell-wrap<%if val.nowrap === true%> cell-nowrap<%/if%>">'+
'<span class="cell-text'+
'<%if val.content === "checkbox"%> cell-text-checkbox<%/if%>'+
'<%if val.content === "input"%> cell-text-input<%/if%>"'+
'<%if val.showtitle === true || val.showtitle === "data" || typeof val.showtitle === "function"%> '+
'<%if typeof val.showtitle === "function"%>'+
'<%var _showtitle = val.showtitle(_value, val.field, $value, $index)%>'+
'title="<%_showtitle??%>"'+
'<%else%>'+
'<%if val.showtitle !==true%>data-<%/if%>title="<%$value[val.field]??%>"'+
'<%/if%>'+
'<%/if%>>'+
'<%if val.content === "checkbox" && _isObject%>'+
'<%if checked === true && !val.title && (_value["checked"]=checked)%><%/if%>'+
'<span class="ui-checkradio">'+
'<input type="checkbox"<%include "_attr"%>>'+
'</span>'+
'<%elseif val.content === "input" && _isObject%>'+
'<input type="text" autocomplete="off"<%include "_attr"%>>'+
'<%else%>'+
'<%include "content"%>'+
'<%/if%>'+
'</span>'+
'</span>'+
'<%/if%>'+
'</td>'+
'<%/each%>',
rows:
'<%if list && list.length%>'+
'<%var toLower = function(str){'+
'return str.replace(/([A-Z])/g, function(a){'+
'return "-"+a.toLowerCase()'+
'})'+
'}%>'+
'<%each list $value _index%>'+
'<%var $index = insertIndex > 0 ? insertIndex + _index : _index%>'+
'<%var rowData = rowRender($value, $index)||{}%>'+
'<%var className = (rowData.className ? " "+rowData.className : "")%>'+
'<%delete rowData.className%>'+
'<tr class="table-row table-row-<%$index%><%className%>" row-pagenum="<%scrollTotal ? pageNum + $index : pageNum??%>" row-index="<%$index%>"<%include "data"%><%each rowData _v _n%> <%_n%>="<%_v%>"<%/each%>>'+
'<%include "cols"%>'+
'</tr>'+
'<%/each%>'+
'<%elseif type === "all"%>'+
'<tr>'+
'<td class="table-cell table-cell-void" colspan="<%cols.length%>">'+
'<span class="ui-void"><%placeholder??%></span>'+
'</td>'+
'</tr>'+
'<%/if%>',
_attr:
'<%if !_value["class"]%>'+
'<%var _class = _value["class"] = ""%>'+
'<%/if%>'+
'<%if _value.className%>'+
'<%var _class = (_value["class"]+=" "+Nui.trim(_value.className))%>'+
'<%delete _value.className%>'+
'<%/if%>'+
'<%each _value _v _k%>'+
' <%_k%>="<%_v%>"'+
'<%/each%>',
attr:
'<%each val value name%>'+
'<%if !isTitle?? && name === "style"%>'+
'style="<%each value _v _k%><%_k%>:<%_v%>;<%/each%>"'+
'<%elseif "field colspan rowspan cellid".indexOf(name) !== -1%>'+
' <%name%>="<%value%>"'+
'<%/if%>'+
'<%/each%>',
data:
'<%if fields%>'+
'<%each $value value field%>'+
'<%if fields === true || $.inArray(field, fields) !== -1%>'+
'<%var _value = stringify(value)%>'+
' data-<%toLower(field)%>=<%if typeof _value !== "undefined"%><%_value%><%else%>"<%value%>"<%/if%>'+
'<%/if%>'+
'<%/each%>'+
'<%/if%>'
},
_exec:function(){
var self = this, opts = self._options, container = opts.container;
if(container && Nui.isArray(opts.columns) && opts.columns.length){
self._container = self._jquery(container);
self._columns = {
all:[],
left:[],
right:[]
}
self._checked = false;
self._emptyColCount = 0;
self._nodragColCount = 0;
Nui.each(opts.columns, function(v, k){
if(v.fixed === 'left' || v.fixed === true){
self._columns.left.push(v)
}
else if(v.fixed === 'right'){
self._columns.right.push(v)
}
if(v.empty){
self._emptyColCount++
}
if(v.nodrag){
self._nodragColCount++
}
self._columns.all.push(v)
})
self._hasLeftRight = self._columns.left.length || self._columns.right.length;
self._keyCode = [];
if(opts.isDir === true){
self._keyCode = self._keyCode.concat([37, 38, 39, 40]);
}
if(opts.keyCode){
self._keyCode = self._keyCode.concat(opts.keyCode);
}
self._create()
}
},
_create:function(){
var self = this, opts = self._options;
self.listData = [];
self._rows = {};
self._cols = {};
self._rowElems = {};
self._colTemplates = {};
self._scrollData = {
top:0,
left:0
}
self._parentCols = {};
self._setEmptyCol();
self._rowNumber = self._getRowNumber(opts.columns, 0, []);
self._setTemplate();
Nui.each(self._columns, function(v, k){
self._setRowCol(v, k)
})
self.element = self._bindComponentName($(self._tpl2html('layout', self._tplData({
cols:self._cols,
rows:self._rows,
isFixed:opts.isFixed === true || opts.isFixed === 'auto',
isBorder:opts.isBorder === true,
isDrag:opts.isDrag === true,
storageWidth:(this._getStorageWidth() || {map:{}}).map,
isColgroup:opts.isColgroup === true,
paging:opts.paging && typeof opts.paging === 'object' && opts.paging.isPage !== false,
footer:opts.footer,
rowRender:typeof opts.rowRender === 'function'
}))).appendTo(self._container));
self._initCheckradio(self.element.find('.table-thead'));
self._body = self.element.children('.datagrid-body');
self._tableThead = self._body.find('.datagrid-thead');
self._tableAll = self._body.children('.datagrid-table-all');
self._tableAllBox = self._tableAll.find('.datagrid-box');
self._tableAllTitle = self._tableAll.children('.datagrid-title');
self._tableAllThead = self._tableAll.find('.datagrid-thead');
self._tableAllTheadTable = self._tableAllThead.children();
self._tableAllWrap = self._tableAllBox.children();
self._tableLeft = self._body.children('.datagrid-table-left');
self._tableRight = self._body.children('.datagrid-table-right');
self._tableFixed = self._body.children('.datagrid-table-fixed');
self._tableLeftBox = self._tableLeft.find('.datagrid-box');
self._tableRightBox = self._tableRight.find('.datagrid-box');
self._tableFixedBox = self._tableFixed.find('.datagrid-box');
self._foot = self.element.children('.datagrid-foot');
self._tableTbody = self._body.find('.datagrid-tbody');
self._colgroup = self._body.find('colgroup col');
if(self._emptyColCount){
self._colgroupElems = [];
self._colgroup.each(function(i, elem){
var $elem = $(elem);
if(!$elem.attr('empty') && !$elem.attr('nodrag')){
self._colgroupElems.push($elem)
}
})
self._tableCellEmpty = self._tableAllThead.find('.table-cell-empty')
}
if(opts.width){
self._tableAllThead.children().css('width', opts.width);
self._tableAllWrap.children().css('width', opts.width);
}
self._tbodys = {};
self._hideElems = {};
Nui.each(self._cols, function(v, k){
var elem = self.element.find('.datagrid-table-'+k+' .datagrid-tbody');
elem.parentElement = elem.parent();
self._tbodys[k] = elem;
self._hideElems[k] = [];
})
self._theadHeight();
self._initList(true);
self._bindEvent();
self._splitWidth();
self._setScrollClassName();
},
_setEmptyCol:function(){
var self = this, opts = self._options;
if(!self._emptyColCount && opts.isFixed === 'auto'){
self._emptyColCount = 1;
var emptyCol = {
empty:true
}
if(self._columns.right.length){
var rightCol = self._columns.right[0];
Nui.each(opts.columns, function(v, i){
if(rightCol === v){
opts.columns = opts.columns.slice(0, i).concat(emptyCol, opts.columns.slice(i));
self._columns.all = self._columns.all.slice(0, i).concat(emptyCol, self._columns.all.slice(i));
return false;
}
})
}
else{
self._columns.all.push(emptyCol)
opts.columns.push(emptyCol)
}
}
},
_setTemplate:function(){
var self = this;
var tpl = '';
Nui.each(self._colTemplates, function(v, k){
tpl += '<%'+ (tpl ? 'else' : '') +'if ("content_"+val.cellid) === "'+ k +'"%><%include "'+ k +'"%>'
})
if(tpl){
tpl += '<%else%><%_value??%><%/if%>'
}
else{
tpl = '<%_value??%>'
}
self._template.content = tpl;
},
_getRowNumber:function(array, index, arr, cellid, parent){
var self = this, opts = self._options, _class = self.constructor;
if(!arr[index]){
arr[index] = true;
}
if(cellid === undefined){
cellid = 0;
}
var opts = opts.option || {};
Nui.each(array, function(v){
v.cellid = cellid++;
if(!v.empty){
for(var i in opts){
if(v[i] === undefined && i !== 'cellid'){
v[i] = opts[i]
}
}
var order = v.order;
var className = v.className;
if(order === true){
order = 'desc'
}
if(order === 'asc' || order === 'desc'){
v.order = {};
v.order[order] = 1;
}
if(v.order && !v.order.field){
v.order.field = v.field
}
if(v.template === true){
var tplid = 'content_'+v.cellid;
self._template[tplid] = self._colTemplates[tplid] = v.filter || v.content;
}
if(!v.style){
v.style = {};
}
if(v.align){
v.style['text-align'] = v.align;
}
if(v.valign){
v.style['vertical-align'] = v.valign;
}
if(v.width){
v.width = v.width.toString().replace(/px$/, '');
}
if(v.minWidth){
v.minWidth = v.minWidth.toString().replace(/px$/, '');
}
if(v.maxWidth){
v.maxWidth = v.maxWidth.toString().replace(/px$/, '');
}
if(v.content === 'checkbox'){
self._isCheckbox = true
}
if(typeof className !== 'function'){
if(!className){
className = '';
}
if(className){
className = ' ' + Nui.trim(className);
}
v.className = className;
}
if($.isEmptyObject(v.style)){
delete v.style
}
if(parent && parent.fixed){
v.fixed = parent.fixed
}
if(_class._hasChildren(v)){
self._parentCols[v.cellid] = v;
cellid = self._getRowNumber(v.children, index+1, arr, cellid, v)
}
}
})
if(parent){
return cellid
}
return arr.length
},
_initList:function(init){
var self = this, opts = self._options;
if(opts.paging){
delete opts.paging.wrap;
var container = opts.paging.container;
opts.paging.wrap = self._foot.children('.datagrid-paging');
opts.paging.container = !container ? self._tableAllBox : container;
var pagingId = 'paging_'+self.__id;
var echoData = opts.paging.echoData;
self.paging = window[pagingId] = new Paging(Nui.extend({}, opts.paging, {
echoData:function(data, type){
if(self.element){
delete self.activeIndex;
delete self.activeElem;
self.data = data;
if(opts.isLazyload){
self._lazyload(type);
}
else{
self._render(type);
}
if(typeof echoData === 'function'){
echoData.call(opts, data, type)
}
if(init){
init = false;
self._splitWidth()
}
}
}
}))
if(opts.isPaging === true){
self.paging.query(true)
}
}
else if(opts.data){
var data = opts.data;
if(typeof data === 'function'){
data = opts.data.call(opts, self)
}
self.data = data;
if(opts.isLazyload){
self._lazyload();
}
else{
self._render();
}
}
},
_setScrollClassName:function(scrollSize){
var self = this;
if(!scrollSize && self._hasLeftRight){
var width = self._tableAllThead.outerWidth();
var tableWidth = self._tableAllTheadTable[0].scrollWidth;
var left = 'datagrid-scroll-left';
var right = 'datagrid-scroll-right';
var middle = 'datagrid-scroll-middle';
var body = self._body;
if(self._scrollData.left){
var className;
//滚动到最右边
if(width + self._scrollData.left + 1 >= tableWidth){
body.addClass(right);
className = middle
}
else{
body.addClass(middle)
className = right
}
body.removeClass(left + ' ' + className)
}
else if(tableWidth > width){
body.removeClass(middle + ' ' + right)
body.addClass(left)
}
else{
body.removeClass(left + ' ' + middle + ' ' + right)
}
}
},
_bindEvent:function(){
var self = this, opts = self._options;
self._on('scroll', self._tableAllBox, function(e, elem){
var scrollData = self._scrollData;
var top = scrollData.top;
self._scrollData = {
left:elem.scrollLeft(),
top:elem.scrollTop()
}
if(self._scrollCount !== 2){
var scrollSize = self._scrollData.top - top;
//scrollSize为0表示横向滚动
if(opts.isLazyload && scrollSize){
self._scrollRender(scrollSize)
}
self._setScrollClassName(scrollSize);
if(self._hoverTable === 'all'){
self._tableFixedBox.scrollTop(self._scrollData.top);
self._tableAllThead.scrollLeft(self._scrollData.left);
}
self._callback('Scroll', [e, elem, self._scrollData]);
}
else if(self._scrollCount === 2){
delete self._scrollCount
}
if(self._scrollCount === 1){
self._scrollCount = 2
}
if(self._scrollCount === 0){
delete self._scrollCount
}
})
self._on('scroll', self._tableFixedBox, function(e, elem){
if(self._hoverTable !== 'all'){
var stop = elem.scrollTop();
if(self._hoverTable === 'left'){
self._tableRightBox.scrollTop(stop);
}
else{
self._tableLeftBox.scrollTop(stop);
}
self._tableAllBox.scrollTop(stop);
}
})
if(opts.isDrag){
self._bindDrag()
}
self._event()
},
_bindDrag:function(){
var self = this, opts = self._options;
var cellid, isMove, x = 0, _x = 0, left = 0;
if(!self._dragLine){
self._dragLine = $('<div class="datagrid-drag-line"></div>').appendTo(self._body)
}
self._on('mousedown', self.element, '.table-cell-drag-line', function(e, ele){
cellid = ele.parent().attr('cellid');
isMove = true;
x = e.pageX;
var boxHeight = self._tableAllBox.height();
var wrapHeight = self._tableAllBox.children().outerHeight();
self._dragLine.show().css({
'left':left = e.pageX - self._body.offset().left,
'height':self._tableAllThead.height() + (wrapHeight > boxHeight ? boxHeight : wrapHeight)
});
e.preventDefault();
})
self._on('mousemove', Nui.doc, function(e){
if(isMove){
e.preventDefault();
_x = e.pageX;
self._dragLine.css('left', left + (_x - x))
}
})
self._on('mouseup', Nui.doc, function(e){
if(isMove){
self._dragLine.hide()
isMove = false
if(x !== e.pageX){
var diff = _x - x;
var setWidth = function(cellid, diff){
var colgroup = self._colgroup.filter('[cellid="'+ cellid +'"]');
var $first = colgroup.eq(0);
var minWidth = parseFloat($first.attr('min-width') || 0);
var maxWidth = parseFloat($first.attr('max-width') || 0);
var width = parseFloat($first.attr('width') || 0) + diff;
if(width < minWidth){
width = minWidth
}
else if(maxWidth > 0 && width > maxWidth){
width = maxWidth
}
colgroup.attr({
'width':width,
'default-width':width
})
self._storageWidth(cellid, width)
}
if(self._parentCols[cellid]){
var cols = [];
var setCols = function(col){
if(col.children && col.children.length){
Nui.each(col.children, function(v){
setCols(v)
})
}
else{
cols.push(col)
}
}
setCols(self._parentCols[cellid]);
if(cols.length){
var splitWidth = parseInt(diff / cols.length);
Nui.each(cols, function(v){
setWidth(v.cellid, splitWidth)
})
}
}
else{
setWidth(cellid, diff)
}
if(opts.isFixed === true || opts.isFixed === 'auto'){
var height = self._setHeight();
var table = self._tableAllWrap.children();
var fixedHeight = height;
if(table.outerWidth() > self._tableAllBox.width()){
fixedHeight -= scrollBarWidth;
}
self._tableFixedBox.css('max-height', fixedHeight);
}
self._setScrollClassName()
}
}
})
},
_getList:function(){
var self = this, opts = self._options, field = opts.dataField, list = self.data, _list;
if(field && Nui.type(list, 'Object')){
Nui.each(field.split('.'), function(v){
if(list[v]){
list = list[v]
}
else{
list = null;
return false;
}
})
}
if(_list = self._callback('RenderBefore', [list])){
if(Nui.type(_list, 'Array')){
list = _list
}
}
return list||[]
},
_renderRow:function(index, data, callback){
var self = this,
opts = self._options,
rowHtml = '',
rowElems = self._rowElems;
Nui.each(self._cols, function(v, k){
if(v.length){
if(data.length && typeof opts.rowRender === 'function'){
rowHtml = opts.rowRender.call(opts, self, data, v, k)
}
else{
rowHtml = self._tpl2html('rows', {
type:k,
isFixed:opts.isFixed === true || opts.isFixed === 'auto',
cols:v,
fields:opts.fields ? (opts.fields === true ? opts.fields : [].concat(opts.fields)) : null,
list:data,
insertIndex:index,
placeholder:opts.placeholder,
pageNum:opts.paging && self.paging ? self.paging.current : undefined,
scrollTotal:opts.paging && opts.paging.scroll && opts.paging.scroll.total,
checked:self._checked,
stringify:function(val){
if(typeof opts.stringify=== 'function'){
return opts.stringify.call(opts, val)
}
},
rowRender:function(val, i){
if(typeof opts.onRowRender === 'function'){
return opts.onRowRender.call(opts, self, val, i)
}
return opts.onRowRender
}
})
}
callback(v, k, $(rowHtml))
}
else if(index === false){
delete rowElems[k]
}
})
},
_render:function(type){
var self = this,
opts = self._options,
rowElems = self._rowElems,
isScroll = opts.paging && opts.paging.scroll && opts.paging.scroll.enable === true;
self.list = self._getList();
if(isScroll && type === 'reload'){
self.element.find('.datagrid-tbody > [row-pagenum="'+ (self.paging.current) +'"]').nextAll().addBack().remove();
self.listData = self.listData.slice(0, self.paging.current);
}
if(isScroll && (type === 'reload' || type === 'jump')){
self.listData = self.listData.concat(self.list)
}
else{
self.listData = self.list
}
if(isScroll && !self.list.length && self.paging && self.paging.current){
self._callback('Render')
return
}
self._renderRow(false, self.list, function(v, k, $elems){
if(isScroll && type === 'reload' && rowElems[k]){
if(opts.paging.scroll.total){
rowElems[k] = rowElems[k].slice(0, self.paging.current)
}
else{
rowElems[k] = rowElems[k].slice(0, (self.paging.current - 1) * self.paging.pCount)
}
}
var tbody = self._tbodys[k];
var elems;
if(!rowElems[k]){
rowElems[k] = []
}
if(!isScroll || (type !== 'jump' && type !== 'reload')){
tbody.empty()
rowElems[k] = []
}
elems = $elems.appendTo(tbody);
if(self.list.length){
elems.each(function(i, elem){
var $elem = $(elem)
rowElems[k].push($elem)
self._initCheckradio($elem);
})
}
});
self._resetSize();
self._callback('Render');
},
_lazyload:function(){
var self = this, opts = self._options;
self.listData = self.list = self._getList();
self._tableAllHeight = self.listData.length * opts.rowHeight;
self._tableAllWrap.height(self._tableAllHeight);
var length = self.listData.length;
var placeholder = [];
for(var i=0; i<length; i++){
placeholder.push('<tr style="display:none;"></tr>')
}
Nui.each(self._cols, function(v, k){
var tbody = self._tbodys[k];
tbody.html(placeholder);
tbody.childrenElement = tbody.children();
self._rowElems[k] = new Array(length)
})
self._resetSize();
self._scrollRender(0);
self._callback('Render');
},
_scrollRender:function(scrollSize){
var self = this, opts = self._options, rowElems = self._rowElems;
var top = self._scrollData.top;
var topIndex = Math.max(Math.floor(top / opts.rowHeight) - opts.preloadCount, 0);
var bottomIndex = topIndex + self._renderCount + opts.preloadCount;
var list = [];
var listIndex = [];
var length = self.listData.length;
var isTop = scrollSize < 0;
Nui.each(self.listData, function(v, i){
if(i >= topIndex && i < bottomIndex && !rowElems.all[i]){
list.push(v)
listIndex.push(i)
}
})
Nui.each(self._tbodys, function(v, k){
if(rowElems[k]){
var bottom = bottomIndex + 1;
Nui.each(rowElems[k], function(ele, i){
if(i >= topIndex && i < bottom){
self._hideElems[k][i] = false;
ele && ele.show()
}
else if(!self._hideElems[k][i] && (isTop && i >= bottom || !isTop && i < topIndex)){
self._hideElems[k][i] = true
ele && ele.hide()
}
})
}
v.parentElement.css('margin-top', topIndex * opts.rowHeight);
})
if(list.length || !length){
self._renderRow(listIndex[0], list, function(v, k, $elems){
if(!rowElems[k]){
rowElems[k] = new Array(length)
}
var tbody = self._tbodys[k];
if(list.length){
Nui.each(listIndex, function(v, i){
if(!rowElems[k][v]){
var $elem = $elems.eq(i);
tbody.childrenElement.eq(v).replaceWith($elem);
self._initCheckradio($elem)
rowElems[k][v] = $elem
}
})
}
else if(!length){
tbody.html($elems)
}
})
}
var table = self._tableAllWrap.children();
var marginTop = parseFloat(table.css('margin-top'));
var diff = table.outerHeight() + marginTop - self._tableAllHeight;
if(diff > 1){
//因为高度发生了变化，导致scroll事件被触发，此处进入了无限循环，因此表格会出现抖动情况发生
if(self._scrollCount !== 0){
self._scrollCount = 1;
}
self._tableAllWrap.height(self._tableAllHeight + diff)
}
},
_checkradio:function(){
var self = this;
var callback = function(elem, e){
var className = 'datagrid-checkbox-choose';
if(elem.hasClass(className)){
var checked = elem.prop('checked');
var allName = 'datagrid-checkbox-all';
if(elem.attr('name') === allName){
self._checked = checked;
self._tableTbody.find('.'+ className +':enabled').checkradio('checked', checked)
if(this._hoverTable !== 'all'){
self._tableAllThead.find('[name="'+ allName +'"]:enabled').checkradio('checked', self._checked)
}
}
else{
if(this._hoverTable !== 'all'){
self._rowElems.all[elem.closest('.table-row').attr('row-index')].find('.'+className+':enabled').checkradio('checked', checked)
}
var checkboxItem = self._tableAllWrap.find('.'+className+':enabled');
self._checked = checkboxItem.filter(':checked').length === checkboxItem.length;
self._tableThead.find('[name="'+ allName +'"]:enabled').checkradio('checked', self._checked)
}
}
self._callback('CheckboxChange', [e, elem]);
}
var _opts = {
callback:callback
}
return _opts;
},
_checkedAll:function(checked){
this._tableThead.find('[name="datagrid-checkbox-all"]:enabled').checkradio('checked', this._checked = true)
if(checked !== false){
this._tableTbody.find('.datagrid-checkbox-choose:enabled').checkradio('checked', true)
}
},
_initCheckradio:function(elem, checked){
var self = this, opts = self._options;
if(opts.isInitCheckradio || self._isCheckbox){
var checkbox = elem.find('.datagrid-checkbox');
if(checked !== undefined){
checkbox.prop('checked', checked)
}
checkbox.checkradio(self._checkradio())
}
},
_setHeight:function(){
var self = this, opts = self._options, _class = self.constructor;
var height = 0;
if(opts.height !== 'auto' && self._tableAllBox){
self._tableAllBox.css('height', 'auto');
var conntailerHeight = self._container.height();
if(opts.height > 0){
conntailerHeight = opts.height
}
height = conntailerHeight -
self._tableAllTitle.outerHeight() -
_class._getSize(self._tableAllTitle, 'tb', 'margin') -
self._foot.outerHeight() -
_class._getSize(self._foot, 'tb', 'margin');
self._tableAllBox.height(height);
self._renderCount = Math.max(Math.ceil(height / opts.rowHeight), opts.renderCount);
}
return height
},
_getStorageWidth:function(){
var self = this, opts = self._options;
var storageKey = opts.storageKey;
if(typeof storageKey === 'function'){
storageKey = storageKey.call(this, self)
}
if(opts.isDrag && opts.id && storageKey){
var str = localStorage.getItem(storageKey + '_' + opts.id);
if(str){
//cellid:width,cellid:width,...
var arr = str.split(',');
var map = {};
Nui.each(arr, function(val){
var _arr = val.split(':');
map[_arr[0]] = _arr[1]