157 lines
6.3 KiB
JavaScript
Executable File
157 lines
6.3 KiB
JavaScript
Executable File
/**
|
||
* 因为ligerui的tree用起来有些问题没解决，所以赶时间临时参考效果做一个，后期看情况扩展，使用参数上参考ligerui.^_^.
|
||
* params: {
|
||
* url:'xxxx/xxx/xxx',
|
||
* width:'100%',
|
||
* headerRowHeight:28,
|
||
* rowHeight:28,
|
||
* params:{xxx:xxx,xxx:xxx}
|
||
* rownumbers:true,
|
||
* columns:[{display:'分类名称',name:'catName',id:'catId',align:'left',width:'20%',render:function(item){}}]
|
||
*}
|
||
*/
|
||
$.fn.WSTGridTree = function(options){
|
||
var radomId = (new Date().getTime()+Math.round(Math.random()*700));
|
||
var defaults = {id:'wst_'+radomId,tbodyId:'wst_tbody_'+radomId,width:'100%',headerRowHeight:28,rowHeight:28,nodeNum:0,params:{},level:0};
|
||
var opts = $.extend(defaults, options);
|
||
var jqObj = $(this);
|
||
var treeKeyId;
|
||
var createTBHead = function(){
|
||
var head = [],htmp,rowAlign,rowWidth;
|
||
head.push('<table class="mmg-head wst-grid-tree" cellspacing="0" cellpadding="0" width="'+opts.width+'"><thead id="'+opts.tbodyId+'" class="mmg-headWrapper"><tr height="'+opts.headerRowHeight+'" class="mmg-head wst-grid-tree-hd">');
|
||
if(opts.rownumbers)head.push('<td class="wst-grid-tree-hd-cell first" style="width:26px;">#</td>');
|
||
for(var i=0;i<opts.columns.length;i++){
|
||
htmp = opts.columns[i];
|
||
rowWidth = htmp.width?('width="'+htmp.width+'"'):"";
|
||
if(htmp.id){
|
||
treeKeyId = htmp.id;
|
||
head.push('<td class="wst-grid-tree-hd-cell" style="text-align:left;padding-left:5px;" '+rowWidth+'>'+htmp.display+'</td>');
|
||
}else{
|
||
rowAlign = (htmp.align?(' style="text-align:'+htmp.align+'" '):'');
|
||
head.push('<td class="wst-grid-tree-hd-cell" '+rowAlign+' '+rowWidth+'>'+htmp.display+'</td>');
|
||
}
|
||
}
|
||
head.push('</tr></thead></table>');
|
||
$(jqObj).html(head.join(''));
|
||
}
|
||
var loadData = function(){
|
||
var popts = $.extend(opts,{pid:opts.tbodyId,params:{},level:0});
|
||
loadRow(popts);
|
||
}
|
||
var loadRow = function(_opts){
|
||
$("tr[id^='"+opts.pid+"_']").remove();
|
||
$.getJSON(_opts.url,_opts.params,function(data,textStatus){
|
||
if(data.Rows){
|
||
var body,htmp,ttmp,val,rowAlign,rowWidth,nodeId,prefix;
|
||
data = data.Rows;
|
||
var lastNodeId = opts.pid;
|
||
for(var i=0;i<data.length;i++){
|
||
ttmp = data[i];
|
||
nodeId = _opts.pid+"_"+opts.nodeNum;
|
||
opts.nodeNum++;
|
||
body = [];
|
||
body.push('<tr id="'+nodeId+'" height="'+opts.rowHeight+'" class="mmg mmg-body wst-grid-tree-row j-'+ttmp[treeKeyId]+'" dataid="'+ttmp[treeKeyId]+'" pdataid="'+nodeId+'" lv="'+_opts.level+'">');
|
||
if(opts.rownumbers)body.push('<td class="wst-grid-tree-row-cell first"><label class="mmg-index" style="margin-right:0px">'+(i+1)+'</label></td>');
|
||
for(var j=0;j<opts.columns.length;j++){
|
||
htmp = opts.columns[j];
|
||
if(htmp.render){
|
||
val = htmp.render(ttmp);
|
||
}else{
|
||
val = ttmp[htmp.name];
|
||
}
|
||
rowWidth = htmp.width?('width="'+htmp.width+'"'):"";
|
||
if(htmp.id){
|
||
prefix = '';
|
||
for(var k=0;k<_opts.level;k++){
|
||
prefix+='<div class="wst-grid-tree-space"></div>';
|
||
}
|
||
prefix+='<div class="l-grid-tree-link fa fa-folder wst-tree-img" dataid="'+ttmp[treeKeyId]+'" pdataid="'+nodeId+'" lv="'+_opts.level+'"></div>';
|
||
body.push('<td class="wst-grid-tree-row-cell" style="text-align:left" '+rowWidth+'>'+prefix+val+'</td>');
|
||
}else{
|
||
rowAlign = (htmp.align?(' style="text-align:'+htmp.align+'" '):'');
|
||
body.push('<td class="wst-grid-tree-row-cell" '+rowAlign+' '+rowWidth+'>'+val+'</td>');
|
||
}
|
||
}
|
||
body.push('</tr>');
|
||
$(body.join('')).insertAfter($('#'+lastNodeId));
|
||
lastNodeId = nodeId;
|
||
$('#'+nodeId+" .wst-tree-img").click(function(){
|
||
if($(this).hasClass('fa-folder')){
|
||
$(this).removeClass('fa-folder').addClass('fa-folder-open');
|
||
if($("tr[id^='"+$(this).attr('pdataid')+"_']").size()==0){
|
||
_opts.pid = $(this).attr('pdataid');
|
||
_opts.params[treeKeyId] = $(this).attr('dataid');
|
||
_opts.level = parseInt($(this).attr('lv'),10)+1;
|
||
loadRow(_opts);
|
||
}else{
|
||
$("tr[id^='"+$(this).attr('pdataid')+"_']").each(function(){
|
||
$(this).show();
|
||
})
|
||
}
|
||
}else{
|
||
$(this).removeClass('fa-folder-open').addClass('fa-folder');
|
||
$("tr[id^='"+$(this).attr('pdataid')+"_']").each(function(){
|
||
$(this).hide();
|
||
})
|
||
}
|
||
changeRowColor();
|
||
changeLinenumber();
|
||
})
|
||
}
|
||
changeRowColor();
|
||
changeLinenumber();
|
||
}
|
||
if(opts.callback)opts.callback();
|
||
})
|
||
}
|
||
var changeRowColor = function(){
|
||
var even = false;
|
||
$('.wst-grid-tree-row').each(function(){
|
||
$(this).removeClass('bg-color');
|
||
if($(this).is(':visible')){
|
||
if(even)$(this).addClass('bg-color');
|
||
even = !even;
|
||
$(this).click(function(){
|
||
$(this).addClass('row-selected').siblings().removeClass('row-selected');
|
||
$(this).addClass('row-selected').siblings().each(function(){
|
||
if($(this).hasClass('bg-color2') && !$(this).hasClass('row-selected'))$(this).removeClass('bg-color2').addClass('bg-color');
|
||
})
|
||
|
||
});
|
||
/*$(this).live({
|
||
mouseover:function(){
|
||
if($(this).hasClass('row-selected'))$(this).removeClass('row-selected').addClass('row-selected2');
|
||
if($(this).hasClass('bg-color'))$(this).removeClass('bg-color').addClass('bg-color2');
|
||
$(this).addClass('row-hover');
|
||
},
|
||
mouseout:function(){
|
||
$(this).removeClass('row-hover');
|
||
if($(this).hasClass('row-selected2'))$(this).removeClass('row-selected2').addClass('row-selected');
|
||
if($(this).hasClass('bg-color2') && !$(this).hasClass('row-selected'))$(this).removeClass('bg-color2').addClass('bg-color');
|
||
}
|
||
}) */
|
||
}
|
||
})
|
||
}
|
||
var changeLinenumber = function(){
|
||
var i=1;
|
||
$('.wst-grid-tree-row').each(function(){
|
||
if($(this).is(':visible'))$(this).find('.l-grid-row-cell-rownumbers').html(i++);
|
||
});
|
||
}
|
||
createTBHead();
|
||
loadData();
|
||
return {reload:function(nodeId){
|
||
if(nodeId && nodeId>0){
|
||
var node = $('.j-'+nodeId);
|
||
var topts = {params:{}};
|
||
topts['pid'] = node.attr('id');
|
||
topts['params'][treeKeyId] = nodeId;
|
||
topts['level'] = parseInt(node.attr('lv'),10)+1;
|
||
var popts = $.extend(opts,topts);
|
||
loadRow(popts);
|
||
}else{
|
||
loadData();
|
||
}
|
||
}}
|
||
} |