jqgrid treegrid树状表格 和 折叠表格的前端案例

?treegird 表格

function gridList() {

function gridList() {
$.jgrid.defaults.styleUI = "Bootstrap";
var $gridList = $("#gridList");

$gridList.jqGrid({

treeGrid: true,//启用树型Grid功能?
shrinkToFit: true,//自适应宽度
treeGridModel: "adjacency",//表示返回数据的读取类型，分为两种：nested和adjacency,默认值：nested?
ExpandColumn: "so_managerid",//树型结构在哪列显示
url: "/SystemModule/Sys_Organize/GetTreeGridJson",//要访问的后台地址
height: $(‘body‘).height() - FullHeight - 155,

datatype: "json",
autowidth: true,
rownumbers: true,

colNames: [‘主键‘,‘名称‘,‘负责人‘],//,‘电话‘,‘备注‘
colModel: [
{ name: "so_id",hidden:true,key: true },
{ name: ‘so_fullname‘,width: 450,align: ‘left‘,sortable: false },formatter: showName
{ name: ‘so_managerid‘,hidden: true,width: 300,align: ‘left‘ },
],
beforeRequest: function () {
　　$(".jqgrid-overlay").show();
},
loadComplete: function () {
　　$(".jqgrid-overlay").hide();
}
});

//全选/全不选
//$("#chkAll").on(‘click‘,function () {
// //$("#chkAll").prop("checked",true);
// alert("33"); return;
// //$("input[id^=‘chx‘]").each(function () {
// // $(this).prop("checked",$("#chxCheckAll").is(‘:checked‘));
// //});
//});

}　　

}

折叠表格

$(window).bind(‘resize‘,function () {
　　var width = $(‘.jqGrid_wrapper‘).width();
　　$(‘#table_list‘).setGridWidth(width);
});

function gridList() {

$.jgrid.defaults.styleUI = ‘Bootstrap‘;
$("#table_list").jqGrid({
height: $("body").height() - 155,
autowidth: true,//自适应宽度
shrinkToFit: true,//自适应宽度
rowNum: -1,
rownumbers: true,
datatype: "json",
pager: "#pager_list",
viewrecords: true,
multiselect: true,//复选
//折叠
grouping: true,
groupingView: {
groupField: [‘projectid‘],//折叠字段
groupColumnShow: [false],//分组列是否显示
groupCollapse: true,
groupText: [‘<b>{0} - {1} 条记录</b>‘],
groupOrder: [‘desc‘],
groupSummary: [false],
groupDataSorted: true
},
url: "/ResourceInnovation/Project/GetGridJson",//获取数据的函数
mtype: ‘POST‘,//函数类型
colNames: [‘主键‘,‘项目名称‘,‘年份‘,‘世代‘,‘试验名称‘],
colModel: [
{ name: "scheme_id",index: "scheme_id",hidden: true },
{ name: "projectid",index: "projectid",
{ name: "tyear",index: "tyear",
{ name: "generation",index: "generation",
{
name: "scheme_name",index: "scheme_name",sortable: false,formatter: function (value,opt,row) {
return ‘<a href="@Url.Action("GoMain")/‘ + row.scheme_id + ‘">‘ + value + ‘</a>‘;
}
}
],
jsonReader: {

root: ‘Rows‘,//Json数据
total: ‘TotalPage‘,//总页数
page: ‘CurrentPage‘,//当前页
records: ‘TotalCount‘,//总记录数
id: ‘scheme_id‘,//相当于设置主键
repeatitems: false

},
beforeRequest: function () {
　　$(".jqgrid-overlay").show();
},
loadComplete: function () {
　　$(".jqgrid-overlay").hide();
　　$(".ui-jqgrid-bdiv").css({ "overflow-x": "auto" });
}
});

//查询
$("#btn_search").click(function () {
var year = $("#year").val();
var search_name = $("#search_name").val();
var search_scheme_name = $("#search_scheme_name").val();
if (year == ‘‘ && search_name == ‘‘ && search_scheme_name == ‘‘) {
return;
}
$("#table_list").jqGrid("setGridParam",{
postData: {
year: $("#year").val(),
search_name: $("#search_name").val(),
search_scheme_name: $("#search_scheme_name").val()
}
}).trigger("reloadGrid",[{ page: 1 }]); //重载JQGrid
});

//刷新
$("#btn_refrech").click(function () {

$("#year").val(‘‘);
$("#search_name").val(‘‘);
$("#search_scheme_name").val(‘‘);

$("#table_list").jqGrid("setGridParam",{

postData: {

year: $("#year").val(),
search_scheme_name: $("#search_scheme_name").val()

}

}).trigger("reloadGrid",[{ page: 1 }]); //重载JQGrid

});

}