树型折叠表格html,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: ['{0} - {1} 条记录'],

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 '' + value + '';

}

}

],

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

});

}