写一个属于自己的（基于jquery 的） grid控件
2010-05-19 22:45 J.I.E 阅读(1265) 评论(10) 编辑 收藏 举报jgird插件代码如下：
代码
(function($) {
$.jgrid = {
plugins: {},
defaults: {
td: {
disabled: [], //状态[]对应每一列
editObjs: [], //编辑元素[]对应每一列
opened: true
},
noRecordMsg: "当前没有记录",
save: {
addRecord: {
title: "添加信息",
url: "#",
postTo: "#"
},
delUrl: "#",
updateUrl: "#"
},
callback: {
initAddBoxy: function(SELF, JGRID_OBJ) { return true },
ondelete: function(TR, JGRID_OBJ) { return true },
onupdate: function(TR, JGRID_OBJ) { return true },
validateupdate: function(TR, JGRID_OBJ) { return true },
afteradd: function(JGRID_OBJ) { return true }
}
}
};
//jgrid plugins
$.fn.jgrid = function(opts) {
return this.each(function() {
var conf = $.extend({}, opts);
if (jgrid_component.inst && jgrid_component.inst[$(this).attr('id')]) jgrid_component.inst[$(this).attr('id')].destroy();
if (conf !== false) new jgrid_component().init(this, conf);
});
};
function jgrid_component() {
return {
cntr: ++jgrid_component.cntr,
settings: $.extend({}, $.jgrid.defaults),
init: function(elem, conf) {
var _this = this;
this.container = $(elem);
if (this.container.size == 0) return false;
jgrid_component.inst[this.cntr] = this;
if (!this.container.attr("id")) this.container.attr("id", "jsjgrid_" + this.cntr);
jgrid_component.inst[this.container.attr("id")] = jgrid_component.inst[this.cntr];
this.settings = $.extend(true, {}, this.settings, conf);
// THEMES
this.container.addClass("jgrid");
//add edit button
var colNum = this.container.find("thead tr th").size();
var hasChild = false;
if (this.container.find("table").size() > 0) {
hasChild = true;
}
this.container.find("thead tr:first").append("<th>操作[<a href='#' class='jboxy'>添加</a>]");
var editObj = "<td><a class='jgridedit' href='#'>编辑</a>|<a class='jgriddel' href='#'>删除</a></td>";
var footer = this.container.find("tfoot");
if (footer.html() == null) {
footer = $("<tfoot><tr><td align='right'></td></tr></tfoot>");
this.container.append(footer);
}
if (hasChild) {
$("<th></th>").insertBefore(this.container.find("thead tr:first th:first"));
footer.find("td").attr("colspan", colNum + 2);
InitChildTable(this.container, editObj, colNum);
if (!this.settings.td.opened) {
this.container.find("table").css("display", "none");
}
} else {
footer.find("td").attr("colspan", colNum + 1);
this.container.find("tbody tr").each(function() {
$(this).append(editObj);
});
}
//当前无记录
if (this.container.find("tbody").children().size() <= 0) {
this.container.find("tbody").append($("<tr><td align='center' colspan='" + colNum + 1
+ "'>" + this.settings.noRecordMsg + "</td></tr>"));
}
this.callback("oninit", [this]);
this.attach_events();
},
attach_events: function() {
var _this = this;
var hasChild = false;
if (this.container.find("table").size() > 0) {
hasChild = true;
}
//收缩
$(".jgridleftside").click(function() {
$(this).parent("tr").children("td:first").toggleClass("jgridleftsideSelected");
$(this).parent("tr").next("tr").children("td").children("table").toggle();
});
//编辑
$(".jgridedit", this.container.get(0)).click(function() {
var oldTextArr = [];
var editTr = $(this).parent().parent();
editTr.children().each(function(index) {
if (hasChild && index == 0) {
} else {
if (index < editTr.children().size() - 1) {
var tdObj = $(this);
if (tdObj.children("input").length > 0) {
return false;
}
oldTextArr[index] = tdObj.html();
tdObj.html("");
var tdEditObjs = _this.settings.td.editObjs;
var inputObj = $("<input type='text' />").css("font-size", "14px")
.css("background-color", tdObj.css("background-color"))
.css("width", "100px")
.css("border", "1px dotted red").val(oldTextArr[index]);
var idx = index;
if (hasChild) {
idx = index - 1;
}
if (tdEditObjs.length > 0 && tdEditObjs.length >= index && tdEditObjs[idx] != null
&& tdEditObjs[idx] != "" && tdEditObjs[idx]) {
inputObj = $(tdEditObjs[idx]).val(oldTextArr[index]);
}
var tdDisabled = _this.settings.td.disabled;
if (tdDisabled.length > 0 && tdDisabled.length >= index && tdDisabled[idx]) {
inputObj.attr("disabled", "disabled");
} //判断TD状态
inputObj.appendTo(tdObj);
inputObj.click(function() {
return false;
});
}
else {
var tdObj = $(this);
var editObj = $(this).find("a:first");
editObj.hide();
var saveObj = $("<div><a href='#'>保存</a>|<a href='#'>返回</a></div>")
.css("float", "left").insertBefore($(this).find("a:first"));
//返回
saveObj.find("a").eq(1).click(function() {
editTr.children().each(function(index) {
if (index < editTr.children().size() - 1) {
$(this).html(oldTextArr[index]);
}
else {
saveObj.remove();
editObj.show();
}
});
});
//保存
saveObj.find("a").eq(0).click(function() {
if (!_this.callback("validateupdate", [editTr, _this.container])) {
return false;
}
editTr.children().each(function(index) {
if (hasChild && index == 0) {
} else {
if (index < editTr.children().size() - 1) {
$(this).html($(this).children().val());
}
else {
saveObj.remove();
editObj.show();
}
}
});
//保存到数据库
if (_this.settings.save.updateUrl != "#") {
var updateObj = _this.callback("onupdate", [editTr, _this.container]);
$.ajax({
type: 'post',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
cache: false,
url: _this.settings.save.updateUrl,
data: $.toJSON(updateObj),
beforeSend: function(XMLHttpRequest) {
//$("#SysModuleDSDiv").text("数据加载加载中...");
//Pause(this, 1000);
},
success: function(msg) {
if (msg == false) {
Boxy.alert("更新失败,请确保数据的完整性！", null, { title: "提示信息" });
}
return true;
},
complete: function(XMLHttpRequest, textStatus) {
//隐藏正在查询图片
},
error: function() {
//错误处理
return false;
}
});
} //
});
}
}
}); //editTr.children().each
});
//删除
$(".jgriddel", this.container.get(0)).click(function() {
var editTr = $(this).parent().parent();
if (_this.settings.save.delUrl != "#") {
Boxy.confirm("是否确定删除当前数据", function() {
var dtInfo = _this.callback("ondelete", [editTr, _this.container]);
//从库中删除
$.ajax({
type: 'post',
dataType: 'text',
url: _this.settings.save.delUrl,
data: dtInfo,
beforeSend: function(XMLHttpRequest) {
//Pause(this, 1000);
},
success: function(msg) {
if (msg == false) {
Boxy.alert("更新失败,请确保数据的完整性！", null, { title: "提示信息" });
}
return true;
},
complete: function(XMLHttpRequest, textStatus) {
//隐藏正在查询图片
},
error: function() {
//错误处理
return false;
}
});
editTr.remove();
}, { title: "提示信息" }); return false;
}
else {
editTr.remove();
}
});
//添加
var jboxy = null;
$(".jboxy").click(function() {
_this.callback("initAddBoxy", [$(this), _this.container]);
if (jboxy == null) {
jboxy = new Boxy(_this.settings.save.addRecord.url, {
title: _this.settings.save.addRecord.title,
behaviours: function(c) {
c.find("input[type='submit']").click(function() {
//表单验证
c.find("form:first").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
type: "post",
url: _this.settings.save.addRecord.postTo,
success: function(msg) {
if (msg == false) {
Boxy.alert("添加数据失败,请确保数据的完整性！", null, { title: "提示信息" });
} else {
jboxy.toggle();
_this.callback("afteradd", [_this.container]);
}
}
});
}
});
});
}
});
} else { jboxy.toggle(); }
}); //添加
},
callback: function(cb, args) {
var p = false;
var r = null;
for (var i in this.settings.plugins) {
if (typeof $.tree.plugins[i] != "object") continue;
p = $.tree.plugins[i];
if (p.callbacks && typeof p.callbacks[cb] == "function") r = p.callbacks[cb].apply(this, args);
if (typeof r !== "undefined" && r !== null) {
if (cb == "ondata" || cb == "onparse") args[0] = r; // keep the chain if data or parse
else return r;
}
}
p = this.settings.callback[cb];
if (typeof p == "function") return p.apply(null, args);
}
}
};
// instance manager
jgrid_component.cntr = 0;
jgrid_component.inst = {};
function InitChildTable(table, editObj, colNum) {
var tbody = table.find("tbody tr:first");
tbody.siblings().andSelf().each(function(index) {
var childTable = $(this).find("table:first");
if (childTable.html() == null) {
$("<td class='jgridleftside'></td>").insertBefore($(this).find("td:first"));
$(this).append(editObj);
} else {
$("<td class='linenone'></td>").insertBefore($(this).find("td:first"));
$(this).children("td").eq(1).attr("colspan", colNum + 1).attr("align", "right");
$(this).find("thead th:first").attr("colspan", colNum + 2).attr("align", "center");
var thVal = $(this).find("thead tr th:first").html();
$(this).find("thead tr th:first").html(thVal + " [<a href='#AddMenu' class='jboxy'>添加</a>]");
if (childTable.html() != null) {
InitChildTable(childTable, editObj, colNum);
}
}
});
}
})(jQuery);
代码
$("document").ready(function() {
$(".jgrid").jgrid({
td: {
disabled: [1],
editObjs: ["", "", "", "<select><option value=True>是</option><option value=False>否</option></select>"],
opened: false
},
save: {
addRecord: {
title: "添加模块菜单",
url: "#AddModule",
postTo: "AddModule"
},
delUrl: "DelModule",
updateUrl: "UpdateModule"
},
noRecordMsg: "对不起，当前没有任何记录",
callback: {
initAddBoxy: function(self, table) {
var thead = self.parent().parent().parent();
$("#AddModule").find("select").eq(0).val(thead.attr("type"));
$("#AddModule").find("input").eq(3).val(thead.attr("parentId"));
}, //initAddBoxy
afteradd: function(table) {
LoadingPage("MainContent", "ModuleSetting");
}, //afteradd
ondelete: function(editTr, table) {//传递主键值
var sysAppId;
if (editTr.children().eq(1).children().size() > 0) {
sysAppId = editTr.children().eq(1).children().val();
}
else {
sysAppId = editTr.children().eq(1).html();
}
return "sysAppId=" + sysAppId;
}, //ondelete
onupdate: function(editTr, table) {//传递被更新的值
var sysModule = new Object();
editTr.children().each(function(index) {
if (index == 0) {
}
else if (index < editTr.children().size() - 1) {
//参数设置（与实体类一一对应）
switch (index) {
case 1: { sysModule.SysAppId = $(this).text(); break; }
case 2: { sysModule.SysAppName = $(this).text(); break; }
case 3: { sysModule.SysAppEName = $(this).text(); break; }
case 4: { sysModule.IsView = $(this).text() == "True" ? true : false; break; }
}
$(this).html($(this).text());
}
});
return sysModule;
}, //onupdate
validateupdate: function(editTr, table) {
var state = true;
editTr.find("td").each(function(index) {
switch (index) {
case 0: break;
case 1: break;
case 4: break;
case 5: break;
default:
{
if ($(this).children().val() == "") {
$(this).children().focus().css("border", "1px groove red")
state = false;
}
break;
}
}
});
return state;
}
}
});
});
代码
<table class="jgrid">
<thead><tr><th>标题1</th><th>标题2</th><th>标题3</th></tr></thead>
<tbody>
<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
<tr><td colspan="3">
<table>
<thead><tr><th colspan="3">子元素1</th></tr></thead>
<tbody>
<tr><td>子内容1</td><td>子内容2</td><td>子内容3</td></tr>
<tr><td colspan="3">
<table>
<thead><tr><th colspan="3">子元素2</th></tr></thead>
<tbody>
<tr><td>子内容11</td><td>子内容12</td><td>子内容13</td></tr>
<tr><td colspan="3">
<table>
<thead><tr><th colspan="3">子元素2</th></tr></thead>
<tbody>
<tr><td>子内容111</td><td>子内容112</td><td>子内容113</td></tr>
<tr><td>子内容114</td><td>子内容115</td><td>子内容116</td></tr>
</tbody>
</table>
</td></tr>
<tr><td>子内容14</td><td>子内容15</td><td>子内容16</td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
</td></tr>
<tr><td>内容7</td><td>内容8</td><td>内容9</td></tr>
<tr><td colspan="3">
<table>
<thead><tr><th colspan="3">子元素2</th></tr></thead>
<tbody>
<tr><td>子内容11</td><td>子内容12</td><td>子内容13</td></tr>
<tr><td>子内容14</td><td>子内容15</td><td>子内容16</td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
代码
<div id="AddModule" style="display:none;">
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>请输入以下必要字段来添加新的模块信息</legend>
<p>
<label for="cmoduleid">模块ID (需要小于3个字符)</label>
<input id="cmoduleid" name="sysModule.SysAppId" class="required" minlength="1" maxlength="3" />
</p>
<p>
<label for="cmodulename">模块名称 (必要)</label>
<input id="cmodulename" name="sysModule.SysAppName" class="required" />
</p>
<p>
<label for="cmoduleename">模块EName (必要)</label>
<input id="cmoduleename" name="sysModule.SysAppEName" class="required" />
</p>
<p>
<label for="cmoduletype">模块类型</label>
<select name="sysModule.SysAppType">
<option value="Area">Area</option>
<option value="Controller">Controller</option>
<option value="Action">Action</option>
</select>
</p>
<p>
<label for="cmoduleparent">模块父类ID</label>
<input id="cmoduleparent" name="sysModule.SysAppParent" />
</p>
<p>
<label for="cmoduleisview">模块是否启用</label>
<select name="sysModule.IsView"><option value=true >是</option><option value=false>否</option></select>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</div>
该插件支持普通table ,并且还支持带子table 进行编辑（增删改）
该插件还用boxy插件，大家可以根据自己的喜好更改
以下是截图：
