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'));
// //});
//});

}  

}

折叠表格

扫描二维码关注公众号,回复: 1025570 查看本文章

$(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

});

}

 

 

猜你喜欢

转载自www.cnblogs.com/iwenchao/p/9088856.html
今日推荐