树形列表Jquery插件
一个仿easyui的树形列表插件,依赖bootstarp和jquery。
1.效果图
2.文档
初始化方式一:
<table class=”treegrid” data-options=” title:'treegrid demo',url:'/demo/treegridData?',toolbar:toolbar,onDblClickRow:callback”/>
初始化方式二:
var tree = $("#treegrid1").treegrid({ url:'/demo/treegridData?', onDblClickRow:function(row){ alert(row.name); }, toolbar:[{ text : '新建', iconCls : 'icon-add', handler : callback }, { text : '修改', iconCls : 'icon-cut', handler : callback }, { text : '删除', iconCls : 'icon-remove', handler : callback }], title:'treegridDemo' });
方法
方法名 |
参数 |
返回值 |
使用方法 |
reload |
{} |
void |
Var val = $(“#tt”).treegrid (“reload”,{key:value}); |
getSelected |
void |
row |
Var row = $(“#tt”).treegrid(“getSelected”); |
属性
属性名 |
默认值 |
说明 |
title |
“” |
标题 |
toolbar |
null |
工具栏 |
url |
"" |
数据请求地址 |
Param |
null |
数据请求参数 |
style |
"" |
Table 样式 |
事件
事件名 |
说明 |
onDblClickRow |
双击树形列表时触发 |
3.源代码
!function($){ "use strict"; var TreeGrid = function (element, options) { this.options = $.extend({}, $.fn.treegrid.defaults, options); this.$element = $(element); this.init(); var that = this; $(element).on('click', "i[data-rownum]", function(e){that.fold(e);}); $(element).on('click', "tr[data-rownum]", function(e){that.setSelected(e);}) .on('dblclick', "tr[data-rownum]", function(e){that.onDblClickRow(e);}); $(element).on('click',"a[data-toolbar]",function(e){that.clickToolbar(e);}); }; TreeGrid.prototype = { init:function () { if(!this.options.columns){ this.options.columns = (function findTableDef(that){ var filedArr = "["; jQuery("tr", that).each(function(){ filedArr = filedArr + "["; jQuery("th", this).each(function(){ var data = $(this).data("options"); data && (filedArr = filedArr + "{" + data + "},"); }); filedArr = filedArr + "],"; }); filedArr = filedArr + "]"; filedArr = filedArr.replace(/\},\]/g, "}]").replace(/\],\]/g, "]]"); return (new Function("return " + filedArr))(); })(this.$element); } this.options.columns.length > 0 && this.getData() && this.creatTable(); this.$element.addClass(this.options.style); }, reload:function(param){ param && (this.options.param = param); this.init(); }, fold:function(e){ var item = $(e.target) ,rowNum = item.data('rownum') ,css = item.attr('class') ,i = 1 ,tgrid = this; !function getRow(data){ $.each(data,function(){ if((i++) == rowNum){ tgrid.options.selectedRow = this; }else{ this.hasChild == 1 && (getRow(this.childrenList)); } }); }(this.options.rows); var childLeng = 0; !function getchildLeng(data){ if(data.hasChild == 1){ childLeng = childLeng + data.childrenList.length; $.each(data.childrenList,function(){ getchildLeng(this); }); } }(tgrid.options.selectedRow); var selector = "tr[data-rownum]:gt("+ (rowNum-1) + "):lt(" + (childLeng) +")"; if(css == "icon-folder-open") { item.attr('class','icon-folder-close'); $(selector , this.$element).hide(); }else{ item.attr('class','icon-folder-open'); $(selector , this.$element).each(function(){ $("i",this).attr('class','icon-folder-open'); $(this).show(); }); } }, getData:function(){ var tgrid = this; $.ajax({ type: "get", url: this.options.url, success: function(data, textStatus){ tgrid.options.rows = data.rows; }, data:this.options.param, dataType:"JSON", async:false, }); return true; }, creatTable:function(){ var columns = [] ,html = "" ,rowNum = 1; $.each(this.options.columns,function(){ $.each(this,function(){ this.field&&columns.push(this); }); }); var paddingLeft = 0; !function creatThead(tgrid){ var thead = ""; var tr = ""; tgrid.options.title && (thead = thead + "<tr><th colspan='0' >" + tgrid.options.title + "</th></tr>"); if(tgrid.options.toolbar){ var tbHTML = "<tr><th colspan='0' >"; $.each(tgrid.options.toolbar,function(index,data){ tbHTML = tbHTML + "<a href=\"javascript:void(0)\" data-toolbar=\"" + index + "\"><i class=\"" + this.iconCls + "\"></i>" + this.text + "</a>"; }); tbHTML = tbHTML + "</th></tr>"; thead = thead + tbHTML; } $.each(tgrid.options.columns,function(){ thead = thead + "<tr>"; tgrid.options.rowNum && (thead = thead + "<th style=\"width:30px;\"></th>"); $.each(this,function(){ thead = thead + "<th"; var thText = ""; var thStyle = " style=\""; $.each(this,function(index,data){ if(index == 'title'){ thText = data; } else{ index == 'width' || index == 'height' ? thStyle =thStyle + index + ":" + data + "px;" :thStyle =thStyle + index + ":" + data + ";"; } }); thead = thead + thStyle + "\">" + thText + "</th>"; }); thead = thead + "</tr>"; }); html = html + thead; }(this); !function creatTR(data,columns){ $.each(data,function(index,value){ var that = this; html = html + "<tr data-rownum=\""+ rowNum +"\"><td>" + rowNum + "</td>"; if(this.hasChild == 1){ $.each(columns,function(){ this.field == "name" ?(html = html + "<td style=\"padding-left:" + paddingLeft + "px;\"><a href=\"javascript:void(0)\"><i data-rownum=\""+ rowNum +"\" class=\"icon-folder-open\"></i></a>" + that[this.field]+ "</td>") :(html = html + "<td>" + that[this.field]+ "</td>"); }); html = html + "</tr>"; rowNum++; paddingLeft = paddingLeft + 14; html + creatTR(this.childrenList,columns); paddingLeft = paddingLeft - 14; } else{ $.each(columns,function(){ this.field == "name" ?html = html + "<td style=\"padding-left:" + paddingLeft + "px;\">" + that[this.field]+ "</td>" :html = html + "<td>" + that[this.field]+ "</td>"; }); rowNum++; html + "</tr>"; } }); }(this.options.rows,columns); this.$element.html(html); }, getSelected:function(){ return this.options.selectedRow; }, setSelected:function(e){ var tgrid = this; var item = $(e.target).parent() ,rowNum = item.data('rownum') ,i = 1; !function getRow(data){ $.each(data,function(){ if((i++) == rowNum){ tgrid.options.selectedRow = this; return false; }else{ this.hasChild == 1 && (getRow(this.childrenList)); if(tgrid.options.selectedRow){return false;} } }); }(this.options.rows); }, onDblClickRow:function(e){ var tgrid = this; var item = $(e.target).parent() ,rowNum = item.data('rownum') ,i = 1; !function getRow(data){ $.each(data,function(){ if((i++) == rowNum){ tgrid.options.selectedRow = this; return false; }else{ this.hasChild == 1 && (getRow(this.childrenList)); if(tgrid.options.selectedRow){return false;} } }); }(this.options.rows); if(tgrid.options.onDblClickRow){ tgrid.options.onDblClickRow(tgrid.options.selectedRow); } }, clickToolbar:function(e){ var toolbar = $(e.target) ,index = toolbar.data('toolbar'); this.options.toolbar[index].handler(); } }; $.fn.treegrid = function (option,param) { var result = null; var tgrid = this.each(function () { var $this = $(this) , data = $this.data('treegrid') , options = typeof option == 'object' && option; if(typeof option == 'string' ){ result = data[option](param); }else{ $this.data('treegrid', (data = new TreeGrid(this, options))); } }); if(typeof option == 'string')return result; return tgrid; }; $.fn.treegrid.defaults = { url:"", title:null, toolbar:null, param:null, columns:null, rows:[], selectedRow:null, onDblClickRow:null, rowNum:true, style:"table table-bordered table-hover" }; $(window).on('load', function(){ $("table[class='treegrid']").each(function () { var $tgrid = $(this) , data = $tgrid.data('options'); if(!data) return; $tgrid.treegrid((new Function("return {" + data + "}"))()); }); }); }(window.jQuery);