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", sortable: false },
{ name: "tyear", index: "tyear", sortable: false },
{ name: "generation", index: "generation", sortable: false },
{
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_name: $("#search_name").val(),
search_scheme_name: $("#search_scheme_name").val()

}

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

});

}