porridge jqgrid简单封装

序:找了许多插件发现jqgrid插件蛮不错的.但是比较烦写js觉得麻烦.所以简单的封装一下让他们自动生成.

仅供参考,让大家有一个灵感.后台代码需要自己写.

表格DEMO地址:http://www./blog/jqgrid/jqgrid.html

JS文件:

01

/**

02

* 表格生成类

03

*/

04	$(function(){

05	$(".auto_startgrid[id]").each(function(){

06	var json=jqgridconfig(this.id);

07	$("#"+this.id).jqGrid({

08	url:json.url,

09	datatype: "json",

10	colNames:json.colNames,

11	//字段属性详解  hidden:true 是否隐藏

12	colModel:json.colModel,

13	rowNum:20,//初始请求行数

14	height:"470px",//高度

15	rowList:[20,50,100],//分页行数

16	mtype:"post",//请求方式

17	pager: '#'+json.pageid,//分页的地址

18	sortname:json.sortname,//默认排序id

19	viewrecords: true,//是否要显示总记录数

20	sortorder:json.sortorder,//排序标准

21	caption:"",//表格标题

22	postData:json.postData,//附加参数

23	rownumbers:true,//是否显示序号

24	autowidth:true

25	}).navGrid('#'+json.pageid,{edit:false,add:false,del:false,view:true});

26	if($("#"+this.id+"search").length==1){

27	var tid=this.id;

28	$("#"+this.id+"search").click(function(){

29	$("#"+tid).jqGrid('setGridParam',{postData:{"where":$.getseachwhere($("#"+tid+"search").parents("div[id]").attr("id"))}}).trigger("reloadGrid");

30

});

31

}

32

});

33

});

34	function jqgridconfig(id){

35	if($("#"+id).length==1){

36	var pageid=id+"_page"+Math.floor(Math.random()*(123456+1));

37	$('#'+id).after('<div id="'+pageid+'"></div>');

38

39	var json={url:$("#"+id).attr("action"),

40	pageid:pageid,

41	sortorder:$("#"+id).attr("sortorder")};

42

43	var sortname=$("#"+id).attr("sortname");//排序

44	if(!(sortname!=null && sortname!=""))

45	sortname="id";

46	json.sortname=sortname;

47

48	var sortorder=$("#"+id).attr("sortorder");

49	if(!(sortorder=="asc" || sortorder=="desc"))

50	sortorder="asc";

51	json.sortorder=sortorder;

52

53

54	json.colNames=[];

55	json.colModel=[];

56	var names="id,";

57	$("#"+id+" th").each(function(i){

58	json.colNames[i]=$.trim($(this).text());

59	var name=$(this).attr("name");

60	var col={name:name,index:name,width:$(this).attr("width"),search:true,hidden:($(this).attr("hidden")!=null?true:false)};

61	var formatter=$(this).attr("formatter");

62	if(formatter!=null && formatter!=""){

63

try{

64	col.formatter=$.parseObj(formatter);

65	}catch(e){

66	alert(name+"行回调失败"+e);

67

}

68

}

69	json.colModel[i]=col;

70	names+=name+",";

71

});

72	if($("#"+id+" th").length>0){

73	var fixedwhere=$("#"+id).attr("fixedwhere");//固定条件

74	if(!(fixedwhere!=null && $.trim(fixedwhere)!=""))

75	fixedwhere="1=1";

76	json.postData={"filename":names.substring(0,names.length-1),fixedwhere:fixedwhere};

77

78

}

79	$("#"+id).html("").show(0);

80	return json;

81

}

82

}

HTML文件:

01	<table sortname="funcode"

02	sortorder="asc"

03	class="auto_startgrid"

04	id="fungrid"

05	action="${pageContext.request.contextPath}/module/fun_funjqgrid.action">

06

<tr>

07	<th name="name" width="100">名称</th>

08	<th name="funcode" width="60">code</th>

09	<th name="type" formatter="fun.formattertype" width="100">类型</th>

10	<th name="cls" width="50">样式</th>

11	<th name="link" width="150">连接</th>

12

</tr>

13

</table>

先从JS开始读.

启动时遍历样式为 auto_startgrid 并且该DIV存在ID. 

读取配置 执行 jqgridconfig 方法.他的核心主要是在 jqgridconfig 这个方法上面.

我规定了一个HTML格式.按照这个方法读取并且组成json返回

附加属性含义(这个是配合后台的.如果有需要使用请自行更改.):

类型	属性名	备注
table	sortname	排序字段名称
table	sortorder	排序类型,如 desc or asc
table	action	请求数据地址
table	fixedwhere	固定条件
th	name	列名
th	width	表格列宽度
th	formatter	行回调.二个参数.1 当前列值  2 当前行json  需要返回值.主要用作格式化使用.
th	hidden	如果有值是则该列隐藏

按照该格式填写即可正常生成表格.

如果需要加上搜索功能则加上代码如下:

1	<div id="seach_div">

2	<input class="input-xlarge" name="name" placeholder="Search..." type="text">

3	<button class="btn" id="fungridsearch" type="button">Seach</button>

4

</div>

主要是在生成表格的时候判断处理.

附所需要的工具类:

01	(function($){

02	$.parseObj=function(strData){//转换对象

03	return (new Function( "return " + strData ))();

04

};

05	$.getseachwhere=function(id){

06	var ret="1=1";

07	$("#"+id+" input[name][type=text]").each(function(){

08	var tv=$(this).val();

09	if(""!=tv && tv!=null){

10	if($.trim(tv)!=""){

11	var tname=$(this).attr("name");

12	var t_wh=(tname.indexOf(",")==-1?false:true);

13	var twhere="";

14	while(true){

15	index=tname.indexOf(",");

16	if(index!=-1){

17	var t=tname.substring(0,index);

18	tname=tname.substring(index+1,tname.length);

19	twhere+=" "+(t_wh?"or":"and")+" "+t+" like '%"+tv+"%' ";

20

}else{

21	twhere+=" "+(t_wh?"or":"and")+" "+tname+" like '%"+tv+"%' ";

22

break;

23

}

24

}

25

if(t_wh){

26	ret+=" and (1=2 "+twhere+")";

27

}else

28	ret+=twhere;

29

}

30

}

31

});

32	var tw="";

33	$("#"+id+" input[name][type=checkbox]:checked").each(function(){

34	var tv=$(this).val();

35	if(""!=tv && tv!=null){

36	if($.trim(tv)!="")

37	tw+=" or "+$(this).attr("name")+"='"+tv+"' ";

38

}

39

});

40	if(tw!="")

41	ret+=" and (1=2 "+tw+")";

42

43	$("#"+id+" select[name]").each(function(){

44	var tv=$(this).val();

45	if("null"!=tv && tv!=null && tv!=""){

46	if($.trim(tv)!="")

47	ret+=" and "+$(this).attr("name")+" like '%"+tv+"%' ";

48

}

49

});

50	return ret;

51

};

52	$.subhideform=function(href,sub,json){//生成隐藏表单提交数据  参数一提交地址  参数二 是否打开新页面提交   参数三提交参数

53	if($("#subhideform").length==0)

54	$("body").append("<form style=\"display: none;\" method=\"post\" id=\"subhideform\"></form>");

55	$("#subhideform").attr("action",href);

56

if(sub){

57	$("#subhideform").attr("target","_blank");

58

}else{

59	$("#subhideform").removeAttr("target");

60

}

61	var ht="";

62	if(json!=null){

63	$.each(json,function(k,v){

64	ht+="<textarea name=\""+k+"\">"+v+"</textarea>";

65

});

66

}

67	$("#subhideform").html(ht);

68	$("#subhideform").submit();

69

};

70	})(jQuery);