单据列表增加商品信息展开功能
This commit is contained in:
季圣华
539
src/main/webapp/js/datagrid-detailview.js
Normal file
539
src/main/webapp/js/datagrid-detailview.js
Normal file
@@ -0,0 +1,539 @@
|
||||
$.extend($.fn.datagrid.defaults, {
|
||||
autoUpdateDetail: true // Define if update the row detail content when update a row
|
||||
});
|
||||
|
||||
var detailview = $.extend({}, $.fn.datagrid.defaults.view, {
|
||||
render: function(target, container, frozen){
|
||||
var state = $.data(target, 'datagrid');
|
||||
var opts = state.options;
|
||||
if (frozen){
|
||||
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var rows = state.data.rows;
|
||||
var fields = $(target).datagrid('getColumnFields', frozen);
|
||||
var table = [];
|
||||
table.push('<table class="datagrid-btable" cellspacing="0" cellpadding="0" border="0"><tbody>');
|
||||
for(var i=0; i<rows.length; i++) {
|
||||
// get the class and style attributes for this row
|
||||
var css = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
|
||||
var classValue = '';
|
||||
var styleValue = '';
|
||||
if (typeof css == 'string'){
|
||||
styleValue = css;
|
||||
} else if (css){
|
||||
classValue = css['class'] || '';
|
||||
styleValue = css['style'] || '';
|
||||
}
|
||||
|
||||
var cls = 'class="datagrid-row ' + (i % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + classValue + '"';
|
||||
var style = styleValue ? 'style="' + styleValue + '"' : '';
|
||||
var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + i;
|
||||
table.push('<tr id="' + rowId + '" datagrid-row-index="' + i + '" ' + cls + ' ' + style + '>');
|
||||
table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
|
||||
table.push('</tr>');
|
||||
|
||||
table.push('<tr style="display:none;">');
|
||||
if (frozen){
|
||||
table.push('<td colspan=' + (fields.length+(opts.rownumbers?1:0)) + ' style="border-right:0">');
|
||||
} else {
|
||||
table.push('<td colspan=' + (fields.length) + '>');
|
||||
}
|
||||
|
||||
table.push('<div class="datagrid-row-detail">');
|
||||
if (frozen){
|
||||
table.push(' ');
|
||||
} else {
|
||||
table.push(opts.detailFormatter.call(target, i, rows[i]));
|
||||
}
|
||||
table.push('</div>');
|
||||
|
||||
table.push('</td>');
|
||||
table.push('</tr>');
|
||||
|
||||
}
|
||||
table.push('</tbody></table>');
|
||||
|
||||
$(container).html(table.join(''));
|
||||
},
|
||||
|
||||
renderRow: function(target, fields, frozen, rowIndex, rowData){
|
||||
var opts = $.data(target, 'datagrid').options;
|
||||
|
||||
var cc = [];
|
||||
if (frozen && opts.rownumbers){
|
||||
var rownumber = rowIndex + 1;
|
||||
if (opts.pagination){
|
||||
rownumber += (opts.pageNumber-1)*opts.pageSize;
|
||||
}
|
||||
cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">'+rownumber+'</div></td>');
|
||||
}
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var field = fields[i];
|
||||
var col = $(target).datagrid('getColumnOption', field);
|
||||
if (col){
|
||||
var value = rowData[field]; // the field value
|
||||
var css = col.styler ? (col.styler(value, rowData, rowIndex)||'') : '';
|
||||
var classValue = '';
|
||||
var styleValue = '';
|
||||
if (typeof css == 'string'){
|
||||
styleValue = css;
|
||||
} else if (cc){
|
||||
classValue = css['class'] || '';
|
||||
styleValue = css['style'] || '';
|
||||
}
|
||||
var cls = classValue ? 'class="' + classValue + '"' : '';
|
||||
var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');
|
||||
|
||||
cc.push('<td field="' + field + '" ' + cls + ' ' + style + '>');
|
||||
|
||||
if (col.checkbox){
|
||||
style = '';
|
||||
} else if (col.expander){
|
||||
style = "text-align:center;height:16px;";
|
||||
} else {
|
||||
style = styleValue;
|
||||
if (col.align){style += ';text-align:' + col.align + ';'}
|
||||
if (!opts.nowrap){
|
||||
style += ';white-space:normal;height:auto;';
|
||||
} else if (opts.autoRowHeight){
|
||||
style += ';height:auto;';
|
||||
}
|
||||
}
|
||||
|
||||
cc.push('<div style="' + style + '" ');
|
||||
if (col.checkbox){
|
||||
cc.push('class="datagrid-cell-check ');
|
||||
} else {
|
||||
cc.push('class="datagrid-cell ' + col.cellClass);
|
||||
}
|
||||
cc.push('">');
|
||||
|
||||
if (col.checkbox){
|
||||
cc.push('<input type="checkbox" name="' + field + '" value="' + (value!=undefined ? value : '') + '">');
|
||||
} else if (col.expander) {
|
||||
//cc.push('<div style="text-align:center;width:16px;height:16px;">');
|
||||
cc.push('<span class="datagrid-row-expander datagrid-row-expand" style="display:inline-block;width:16px;height:16px;cursor:pointer;" />');
|
||||
//cc.push('</div>');
|
||||
} else if (col.formatter){
|
||||
cc.push(col.formatter(value, rowData, rowIndex));
|
||||
} else {
|
||||
cc.push(value);
|
||||
}
|
||||
|
||||
cc.push('</div>');
|
||||
cc.push('</td>');
|
||||
}
|
||||
}
|
||||
return cc.join('');
|
||||
},
|
||||
|
||||
insertRow: function(target, index, row){
|
||||
var opts = $.data(target, 'datagrid').options;
|
||||
var dc = $.data(target, 'datagrid').dc;
|
||||
var panel = $(target).datagrid('getPanel');
|
||||
var view1 = dc.view1;
|
||||
var view2 = dc.view2;
|
||||
|
||||
var isAppend = false;
|
||||
var rowLength = $(target).datagrid('getRows').length;
|
||||
if (rowLength == 0){
|
||||
$(target).datagrid('loadData',{total:1,rows:[row]});
|
||||
return;
|
||||
}
|
||||
|
||||
if (index == undefined || index == null || index >= rowLength) {
|
||||
index = rowLength;
|
||||
isAppend = true;
|
||||
this.canUpdateDetail = false;
|
||||
}
|
||||
|
||||
$.fn.datagrid.defaults.view.insertRow.call(this, target, index, row);
|
||||
|
||||
_insert(true);
|
||||
_insert(false);
|
||||
|
||||
this.canUpdateDetail = true;
|
||||
|
||||
function _insert(frozen){
|
||||
var tr = opts.finder.getTr(target, index, 'body', frozen?1:2);
|
||||
if (isAppend){
|
||||
var detail = tr.next();
|
||||
var newDetail = tr.next().clone();
|
||||
tr.insertAfter(detail);
|
||||
} else {
|
||||
var newDetail = tr.next().next().clone();
|
||||
}
|
||||
newDetail.insertAfter(tr);
|
||||
newDetail.hide();
|
||||
if (!frozen){
|
||||
newDetail.find('div.datagrid-row-detail').html(opts.detailFormatter.call(target, index, row));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
deleteRow: function(target, index){
|
||||
var opts = $.data(target, 'datagrid').options;
|
||||
var dc = $.data(target, 'datagrid').dc;
|
||||
var tr = opts.finder.getTr(target, index);
|
||||
tr.next().remove();
|
||||
$.fn.datagrid.defaults.view.deleteRow.call(this, target, index);
|
||||
dc.body2.triggerHandler('scroll');
|
||||
},
|
||||
|
||||
updateRow: function(target, rowIndex, row){
|
||||
var dc = $.data(target, 'datagrid').dc;
|
||||
var opts = $.data(target, 'datagrid').options;
|
||||
var cls = $(target).datagrid('getExpander', rowIndex).attr('class');
|
||||
$.fn.datagrid.defaults.view.updateRow.call(this, target, rowIndex, row);
|
||||
$(target).datagrid('getExpander', rowIndex).attr('class',cls);
|
||||
|
||||
// update the detail content
|
||||
if (opts.autoUpdateDetail && this.canUpdateDetail){
|
||||
var row = $(target).datagrid('getRows')[rowIndex];
|
||||
var detail = $(target).datagrid('getRowDetail', rowIndex);
|
||||
detail.html(opts.detailFormatter.call(target, rowIndex, row));
|
||||
}
|
||||
},
|
||||
|
||||
bindEvents: function(target){
|
||||
var state = $.data(target, 'datagrid');
|
||||
|
||||
if (state.ss.bindDetailEvents){return;}
|
||||
state.ss.bindDetailEvents = true;
|
||||
|
||||
var dc = state.dc;
|
||||
var opts = state.options;
|
||||
var body = dc.body1.add(dc.body2);
|
||||
var clickHandler = ($.data(body[0],'events')||$._data(body[0],'events')).click[0].handler;
|
||||
body.unbind('click').bind('click', function(e){
|
||||
var tt = $(e.target);
|
||||
var tr = tt.closest('tr.datagrid-row');
|
||||
if (!tr.length){return}
|
||||
if (tt.hasClass('datagrid-row-expander')){
|
||||
var rowIndex = parseInt(tr.attr('datagrid-row-index'));
|
||||
if (tt.hasClass('datagrid-row-expand')){
|
||||
$(target).datagrid('expandRow', rowIndex);
|
||||
} else {
|
||||
$(target).datagrid('collapseRow', rowIndex);
|
||||
}
|
||||
$(target).datagrid('fixRowHeight');
|
||||
|
||||
} else {
|
||||
clickHandler(e);
|
||||
}
|
||||
e.stopPropagation();
|
||||
});
|
||||
},
|
||||
|
||||
onBeforeRender: function(target){
|
||||
var state = $.data(target, 'datagrid');
|
||||
var opts = state.options;
|
||||
var dc = state.dc;
|
||||
var t = $(target);
|
||||
var hasExpander = false;
|
||||
var fields = t.datagrid('getColumnFields',true).concat(t.datagrid('getColumnFields'));
|
||||
for(var i=0; i<fields.length; i++){
|
||||
var col = t.datagrid('getColumnOption', fields[i]);
|
||||
if (col.expander){
|
||||
hasExpander = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!hasExpander){
|
||||
if (opts.frozenColumns && opts.frozenColumns.length){
|
||||
opts.frozenColumns[0].splice(0,0,{field:'_expander',expander:true,width:24,resizable:false,fixed:true});
|
||||
} else {
|
||||
opts.frozenColumns = [[{field:'_expander',expander:true,width:24,resizable:false,fixed:true}]];
|
||||
}
|
||||
|
||||
var t = dc.view1.children('div.datagrid-header').find('table');
|
||||
var td = $('<td rowspan="'+opts.frozenColumns.length+'"><div class="datagrid-header-expander" style="width:24px;"></div></td>');
|
||||
if ($('tr',t).length == 0){
|
||||
td.wrap('<tr></tr>').parent().appendTo($('tbody',t));
|
||||
} else if (opts.rownumbers){
|
||||
td.insertAfter(t.find('td:has(div.datagrid-header-rownumber)'));
|
||||
} else {
|
||||
td.prependTo(t.find('tr:first'));
|
||||
}
|
||||
}
|
||||
|
||||
// if (!state.bindDetailEvents){
|
||||
// state.bindDetailEvents = true;
|
||||
// var that = this;
|
||||
// setTimeout(function(){
|
||||
// that.bindEvents(target);
|
||||
// },0);
|
||||
// }
|
||||
},
|
||||
|
||||
onAfterRender: function(target){
|
||||
var that = this;
|
||||
var state = $.data(target, 'datagrid');
|
||||
var dc = state.dc;
|
||||
var opts = state.options;
|
||||
var panel = $(target).datagrid('getPanel');
|
||||
|
||||
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
|
||||
|
||||
if (!state.onResizeColumn){
|
||||
state.onResizeColumn = opts.onResizeColumn;
|
||||
opts.onResizeColumn = function(field, width){
|
||||
if (!opts.fitColumns){
|
||||
resizeDetails();
|
||||
}
|
||||
var rowCount = $(target).datagrid('getRows').length;
|
||||
for(var i=0; i<rowCount; i++){
|
||||
$(target).datagrid('fixDetailRowHeight', i);
|
||||
}
|
||||
|
||||
// call the old event code
|
||||
state.onResizeColumn.call(target, field, width);
|
||||
};
|
||||
}
|
||||
if (!state.onResize){
|
||||
state.onResize = opts.onResize;
|
||||
opts.onResize = function(width, height){
|
||||
if (opts.fitColumns){
|
||||
resizeDetails();
|
||||
}
|
||||
state.onResize.call(panel, width, height);
|
||||
};
|
||||
}
|
||||
|
||||
// function resizeDetails(){
|
||||
// var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible');
|
||||
// if (details.length){
|
||||
// var ww = 0;
|
||||
// dc.header2.find('.datagrid-header-check:visible,.datagrid-cell:visible').each(function(){
|
||||
// ww += $(this).outerWidth(true) + 1;
|
||||
// });
|
||||
// if (ww != details.outerWidth(true)){
|
||||
// details._outerWidth(ww);
|
||||
// details.find('.easyui-fluid').trigger('_resize');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
function resizeDetails(){
|
||||
var details = dc.body2.find('>table.datagrid-btable>tbody>tr>td>div.datagrid-row-detail:visible');
|
||||
if (details.length){
|
||||
var ww = 0;
|
||||
// dc.header2.find('.datagrid-header-check:visible,.datagrid-cell:visible').each(function(){
|
||||
// ww += $(this).outerWidth(true) + 1;
|
||||
// });
|
||||
dc.body2.find('>table.datagrid-btable>tbody>tr:visible:first').find('.datagrid-cell-check:visible,.datagrid-cell:visible').each(function(){
|
||||
ww += $(this).outerWidth(true) + 1;
|
||||
});
|
||||
if (ww != details.outerWidth(true)){
|
||||
details._outerWidth(ww);
|
||||
details.find('.easyui-fluid').trigger('_resize');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.canUpdateDetail = true; // define if to update the detail content when 'updateRow' method is called;
|
||||
|
||||
var footer = dc.footer1.add(dc.footer2);
|
||||
footer.find('span.datagrid-row-expander').css('visibility', 'hidden');
|
||||
$(target).datagrid('resize');
|
||||
|
||||
this.bindEvents(target);
|
||||
var detail = dc.body1.add(dc.body2).find('div.datagrid-row-detail');
|
||||
detail.unbind().bind('mouseover mouseout click dblclick contextmenu scroll', function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$.extend($.fn.datagrid.methods, {
|
||||
fixDetailRowHeight: function(jq, index){
|
||||
return jq.each(function(){
|
||||
var opts = $.data(this, 'datagrid').options;
|
||||
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
|
||||
return;
|
||||
}
|
||||
var dc = $.data(this, 'datagrid').dc;
|
||||
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
|
||||
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
|
||||
// fix the detail row height
|
||||
if (tr2.is(':visible')){
|
||||
tr1.css('height', '');
|
||||
tr2.css('height', '');
|
||||
var height = Math.max(tr1.height(), tr2.height());
|
||||
tr1.css('height', height);
|
||||
tr2.css('height', height);
|
||||
}
|
||||
dc.body2.triggerHandler('scroll');
|
||||
});
|
||||
},
|
||||
getExpander: function(jq, index){ // get row expander object
|
||||
var opts = $.data(jq[0], 'datagrid').options;
|
||||
return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander');
|
||||
},
|
||||
// get row detail container
|
||||
getRowDetail: function(jq, index){
|
||||
var opts = $.data(jq[0], 'datagrid').options;
|
||||
var tr = opts.finder.getTr(jq[0], index, 'body', 2);
|
||||
// return tr.next().find('div.datagrid-row-detail');
|
||||
return tr.next().find('>td>div.datagrid-row-detail');
|
||||
},
|
||||
expandRow: function(jq, index){
|
||||
return jq.each(function(){
|
||||
var opts = $(this).datagrid('options');
|
||||
var dc = $.data(this, 'datagrid').dc;
|
||||
var expander = $(this).datagrid('getExpander', index);
|
||||
if (expander.hasClass('datagrid-row-expand')){
|
||||
expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');
|
||||
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
|
||||
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
|
||||
tr1.show();
|
||||
tr2.show();
|
||||
$(this).datagrid('fixDetailRowHeight', index);
|
||||
if (opts.onExpandRow){
|
||||
var row = $(this).datagrid('getRows')[index];
|
||||
opts.onExpandRow.call(this, index, row);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
collapseRow: function(jq, index){
|
||||
return jq.each(function(){
|
||||
var opts = $(this).datagrid('options');
|
||||
var dc = $.data(this, 'datagrid').dc;
|
||||
var expander = $(this).datagrid('getExpander', index);
|
||||
if (expander.hasClass('datagrid-row-collapse')){
|
||||
expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');
|
||||
var tr1 = opts.finder.getTr(this, index, 'body', 1).next();
|
||||
var tr2 = opts.finder.getTr(this, index, 'body', 2).next();
|
||||
tr1.hide();
|
||||
tr2.hide();
|
||||
dc.body2.triggerHandler('scroll');
|
||||
if (opts.onCollapseRow){
|
||||
var row = $(this).datagrid('getRows')[index];
|
||||
opts.onCollapseRow.call(this, index, row);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$.extend($.fn.datagrid.methods, {
|
||||
subgrid: function(jq, conf){
|
||||
return jq.each(function(){
|
||||
createGrid(this, conf);
|
||||
|
||||
function createGrid(target, conf, prow){
|
||||
var queryParams = $.extend({}, conf.options.queryParams||{});
|
||||
// queryParams[conf.options.foreignField] = prow ? prow[conf.options.foreignField] : undefined;
|
||||
if (prow){
|
||||
var fk = conf.options.foreignField;
|
||||
if ($.isFunction(fk)){
|
||||
$.extend(queryParams, fk.call(conf, prow));
|
||||
} else {
|
||||
queryParams[fk] = prow[fk];
|
||||
}
|
||||
}
|
||||
|
||||
var plugin = conf.options.edatagrid ? 'edatagrid' : 'datagrid';
|
||||
|
||||
$(target)[plugin]($.extend({}, conf.options, {
|
||||
subgrid: conf.subgrid,
|
||||
view: (conf.subgrid ? detailview : undefined),
|
||||
queryParams: queryParams,
|
||||
detailFormatter: function(index, row){
|
||||
return '<div><table class="datagrid-subgrid"></table></div>';
|
||||
},
|
||||
onExpandRow: function(index, row){
|
||||
var opts = $(this).datagrid('options');
|
||||
var rd = $(this).datagrid('getRowDetail', index);
|
||||
var dg = getSubGrid(rd);
|
||||
if (!dg.data('datagrid')){
|
||||
createGrid(dg[0], opts.subgrid, row);
|
||||
}
|
||||
rd.find('.easyui-fluid').trigger('_resize');
|
||||
setHeight(this, index);
|
||||
if (conf.options.onExpandRow){
|
||||
conf.options.onExpandRow.call(this, index, row);
|
||||
}
|
||||
},
|
||||
onCollapseRow: function(index, row){
|
||||
setHeight(this, index);
|
||||
if (conf.options.onCollapseRow){
|
||||
conf.options.onCollapseRow.call(this, index, row);
|
||||
}
|
||||
},
|
||||
onResize: function(){
|
||||
var dg = $(this).children('div.datagrid-view').children('table')
|
||||
setParentHeight(this);
|
||||
},
|
||||
onResizeColumn: function(field, width){
|
||||
setParentHeight(this);
|
||||
if (conf.options.onResizeColumn){
|
||||
conf.options.onResizeColumn.call(this, field, width);
|
||||
}
|
||||
},
|
||||
onLoadSuccess: function(data){
|
||||
setParentHeight(this);
|
||||
if (conf.options.onLoadSuccess){
|
||||
conf.options.onLoadSuccess.call(this, data);
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
function getSubGrid(rowDetail){
|
||||
var div = $(rowDetail).children('div');
|
||||
if (div.children('div.datagrid').length){
|
||||
return div.find('>div.datagrid>div.panel-body>div.datagrid-view>table.datagrid-subgrid');
|
||||
} else {
|
||||
return div.find('>table.datagrid-subgrid');
|
||||
}
|
||||
}
|
||||
function setParentHeight(target){
|
||||
var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();
|
||||
if (tr.length){
|
||||
var index = parseInt(tr.attr('datagrid-row-index'));
|
||||
var dg = tr.closest('div.datagrid-view').children('table');
|
||||
setHeight(dg[0], index);
|
||||
}
|
||||
}
|
||||
function setHeight(target, index){
|
||||
$(target).datagrid('fixDetailRowHeight', index);
|
||||
$(target).datagrid('fixRowHeight', index);
|
||||
var tr = $(target).closest('div.datagrid-row-detail').closest('tr').prev();
|
||||
if (tr.length){
|
||||
var index = parseInt(tr.attr('datagrid-row-index'));
|
||||
var dg = tr.closest('div.datagrid-view').children('table');
|
||||
setHeight(dg[0], index);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getSelfGrid: function(jq){
|
||||
var grid = jq.closest('.datagrid');
|
||||
if (grid.length){
|
||||
return grid.find('>.datagrid-wrap>.datagrid-view>.datagrid-f');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getParentGrid: function(jq){
|
||||
var detail = jq.closest('div.datagrid-row-detail');
|
||||
if (detail.length){
|
||||
return detail.closest('.datagrid-view').children('.datagrid-f');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getParentRowIndex: function(jq){
|
||||
var detail = jq.closest('div.datagrid-row-detail');
|
||||
if (detail.length){
|
||||
var tr = detail.closest('tr').prev();
|
||||
return parseInt(tr.attr('datagrid-row-index'));
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user