写一个属于自己的（基于jquery 的） grid控件

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插件，大家可以根据自己的喜好更改

以下是截图：

转载于:https://www.cnblogs.com/jiewong/archive/2010/05/19/jGrid.html