有两种JQuery扩展方法
1. JQuery扩展工具类方法
$.extend({
consoleLog : function (info) {
console.log(info);
},
DateFormatter : function (date, formatter) {
// 日期格式化
}
});
使用方法：
// 控制台打印
$.consoleLog("helloWorld!");
2. JQuery扩展对象类方法
;(function($){
/**
* 扩展JQuery 方法
*/
$.fn.extend({
"treeGrid" : function (_config) {
// 初始换 属性表格
return this;
}
});
})(jQuery);
使用方法：
<table id="treeGrid"></table>
$("#treeGrid").treeGrid({...});
3. 自定义TreeGrid
自己随便写的， 基于boot strap 3.0.7， 还有许多需要完善，当作例子吧
/* =========================================================*
* 自定义 TreeGrid with bootstrap 3.0.7
* =========================================================
* Copyright © miselehe.com. All rights reserved.
* 基础字段
* {id:"id_value",
* text:"fieldName",
* parentId: "parentId",
*
* children:[{...},{...},...]}
* ========================================================= */
;(function($){
// 声明在严格模式下运行
"use strict";
// 属性菜单默认配置
var default_config = {
style: "table table-striped table-bordered", // 默认样式
fieldId: "id", // 菜单项默认id
baseRender: "text", // 对应菜单名称列显示数据 JSON key 引用名称
fieldFormName: "id", // 默认多选框、单选框 表单域名称
baseFieldName: "菜单名称", // 默认菜单列显示名称
// checkbox: true, // 是否显示多选框， 默认显示多选框，优先级高于多选框
// radio: true, // 是否显示单选框，默认显示， 优先级低于多选框
lineNo: true, // 是否显示行号， 默认显示
extColumns: [], // 扩展字段
data:[] // 数据
};
/**
* 创建树形表格对象
*/
var TreeGrid = function (_this, config) {
// 初始化方法
this.init(_this, config);
// 创建 TreeGrid
this.build();
};
/**
* 初始化方法
*/
TreeGrid.prototype.init = function(_this, config) {
// 初始化前， 重复初始化处理
if (!this.initialized) {
// 初始化
this.initialized = true;
this.targetObj = _this;
this.config = config;
this.lineNoVal = 0;
this.nodes = [];
} else {
this.errorInfo = "init error";
}
};
/**
* 构建 TreeGrid
*/
TreeGrid.prototype.build = function () {
// 设置默认样式
this.targetObj.addClass(this.getConfig("style"));
// 扩展字段
var extColumns = this.getConfig("extColumns");
// 数据
var gridData = this.getConfig("data");
// 设置标题
this.setGridHead(extColumns);
// 设置内容
this.setGridData(extColumns, gridData);
}
/**
* 设置TreeGrid head 信息
*/
TreeGrid.prototype.setGridHead = function (extColumns) {
var _thead = $("<thead></thead>");
var _tr = $("<tr></tr>");
/**
* 基础字段
*/
// 是否显示行号
var lineNo = this.getConfig("lineNo");
if (lineNo) {
_tr.append($("<th></th>").text("#").css({"width":"50px"}));
}
_tr.append($("<th></th>").text(this.getConfig("baseFieldName")));
/**
* 扩展字段
*/
if (extColumns instanceof Array && extColumns.length > 0) {
$.each(extColumns, function(key, obj){
_tr.append($("<th></th>").text(obj.text));
});
}
_thead.append(_tr);
this.targetObj.append(_thead);
}
/**
* 设置TreeGrid data信息
*/
TreeGrid.prototype.setGridData = function (extColumns, gridData) {
var level = 0;
var lineNoVal = 1;
var _tbody = $("<tbody></tbody>");
this.recursionNode(_tbody, extColumns, gridData, level);
this.targetObj.append(_tbody);
}
/**
* 递归节点
*/
TreeGrid.prototype.recursionNode = function (_tbody, extColumns, gridData, level) {
var _treeGrid_Obj = this;
if (gridData instanceof Array && gridData.length > 0) {
// 是否显示行号
var lineNo = _treeGrid_Obj.getConfig("lineNo");
// 基础字段名称
var renderField = _treeGrid_Obj.getConfig("baseRender");
for (var i = 0; i < gridData.length; i++) {
var obj = gridData[i];
_treeGrid_Obj.nodes[obj.id] = obj;
var _tr = $("<tr></tr>").attr({"tg_id": obj.id, "tg_pid": obj.parentId});
/**
* 基础字段
*/
if (lineNo) {
// 显示行号
_tr.append($("<td></td>").text(++_treeGrid_Obj.lineNoVal));
}
var base_td = $("<td></td>");
base_td.append("<span class='mslh_block"+ level +"'></span>");
if(obj.children != null && obj.children.length > 0) {
base_td.append($("<span class='glyphicon glyphicon-minus'></span>").click(function(){
_treeGrid_Obj.toggleNodeExpanded(_treeGrid_Obj, this);
}));
} else {
base_td.append("<span class='glyphicon glyphicon-grain'></span>");
}
base_td.append(obj[renderField]);
_tr.append(base_td);
/**
* 扩展字段
*/
$.each(extColumns, function(key, _column_obj){
// 是否存在格式化需求
if (_column_obj.formatter != null && typeof _column_obj.formatter == 'function') {
_tr.append($("<td></td>").append(_column_obj.formatter(obj)));
} else {
_tr.append($("<td></td>").text(obj[_column_obj.render]));
}
});
_tbody.append(_tr);
_treeGrid_Obj.recursionNode(_tbody, extColumns, obj.children, level+1);
}
}
}
/**
* 切换节点展开折叠状态
* param obj span
*/
TreeGrid.prototype.toggleNodeExpanded = function (_treeGrid_Obj, obj) {
var _obj = $(obj);
if (_obj.hasClass("glyphicon-plus")) {
_obj.removeClass("glyphicon-plus").addClass("glyphicon-minus");
// 展开当前节点 下级节点
var _curTr = _obj.parents("tr[tg_id]");
_curTr.nextAll("[tg_pid='" + _curTr.attr("tg_id") + "']").show();
} else {
// 递归：折叠下级节点
// 展开当前节点 下级节点
var _curTr = _obj.parents("tr[tg_id]");
_treeGrid_Obj.nodeExpandedRecursion(_treeGrid_Obj, _curTr);
}
}
/**
* 递归：折叠下级节点
* param obj tr
*/
TreeGrid.prototype.nodeExpandedRecursion = function (_treeGrid_Obj, _curTr) {
_curTr.find("span[class*='glyphicon-minus']").removeClass("glyphicon-minus").addClass("glyphicon-plus");
// 递归：折叠下级节点
_curTr.nextAll("[tg_pid='" + _curTr.attr("tg_id") + "']").hide().each(function(key, nextNode){
_treeGrid_Obj.nodeExpandedRecursion(_treeGrid_Obj, $(nextNode));
});
}
/**
* 获取TreeGrid配置参数
*/
TreeGrid.prototype.getConfig = function (key) {
if (this.config[key] != null && this.config[key] != undefined) {
return this.config[key];
} else {
return default_config[key];
}
}
/**
* 通过Id 获取节点信息
*/
TreeGrid.prototype.getNode = function (nodeId) {
return this.nodes[nodeId];
}
/**
* 扩展JQuery 方法
*/
$.fn.extend({
"treeGrid" : function (_config) {
var _treeGridObj = this.data("treeGridObj");
if (_treeGridObj == null || $.isEmptyObject(_treeGridObj)) {
var treeGrid = new TreeGrid(this, _config);
this.data("treeGridObj", treeGrid);
return treeGrid;
}
return _treeGridObj;
}
});
})(jQuery);
使用：
<script type="text/javascript">
$(function(){
$.get(url, "", function(data){
$("#treeGrid").treeGrid({
baseRender: "menuName",
extColumns:[{
render:"menuType", text:"菜单类型",
formatter: function (obj) {
if (obj.menuType == "1") {
return '<span class="glyphicon glyphicon-certificate"></span>节点';
} else if (obj.menuType == "2") {
return '<span class="glyphicon glyphicon-leaf"></span>菜单';
} else if (obj.menuType == "3") {
return '<span class="glyphicon glyphicon-fire"></span>功能';
}
}
},{
render:"hasSub", text:"子节点",
formatter: function(obj){
if (obj.hasSub=="1") {
return "存在";
} else {
return "不存在";
}
}
},{
render:"menuUrl", text:"URL"
},{
render:"theFlag", text:"页面标记"
},{
render:"grade", text:"层级"
},{
render:"createTime", text:"创建时间"
},{
render:"sort", text:"顺序"
},{
render:"enFlag", text:"状态",
formatter : function(obj) {
var str = '<div class="switch switch-mini">';
str += '<input type="checkbox" class="enFlag" value="' + obj.enFlag + '" menuId="' + obj.id + '" ' + (obj.enFlag == "1" ? 'checked' : '') + '/>';
str += '</div>';
return str;
}
},{
render:"enFlag", text:"操作",
formatter : function(obj) {
var str = '';
if (obj.menuType != "3") {
str += '<span onclick="addSubMenu(' + "'" + obj.id + "'" + ')" class="glyphicon glyphicon-plus-sign" title="添加子节点"></span>';
}
str += '<span onclick="move(' + "'" + obj.id + "'" + ')" class="glyphicon glyphicon-move" title="移动"></span>';
str += '<span onclick="edit(' + "'" + obj.parentId + "','" + obj.id + "'" + ')" class="glyphicon glyphicon-pencil" ></span>';
str += '<span onclick="remove(' + "'" + obj.menuName + "','" + obj.id + "'" + ')" class="glyphicon glyphicon-trash"></span>';
return str;
}
}],
data: data
});
// 初始化状态开关
switchInit();
});
});
</script>
