• 如何给jqGrid表格按照字段进行分组


    1、问题场景

         (1)利用jqGrid生成表格

         (2)表格按照字段name进行分组


    2、实现源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" />
    		<link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" />
    		<link rel="stylesheet" href="../css/ui.jqgrid.css" />
    		<script src="../js/jquery-1.11.0.min.js"></script>
    		<script src="../js/jquery.jqGrid.min.js"></script>
    		<script src="../js/i18n/grid.locale-cn.js"></script>
    		<script>
    			$(function(){
    				 var mydata = [
    		            {id:"1",name:"1号"},
    		            {id:"2",name:"2号"},
    		            {id:"3",name:"3号"},
    		            {id:"4",name:"1号"},
    		            {id:"5",name:"2号"},
    		            {id:"6",name:"3号"},
    		            {id:"7",name:"1号"},
    		            {id:"8",name:"2号"},
    		            {id:"9",name:"3号"}
    		          ];
    				
    				jQuery("#column").jqGrid({
    		            data: mydata,
    		            datatype: "local",
    		            height: 'auto',
    		            rowNum: 30,
    		            rowList: [10,20,30],
    		            colNames:['编号','名称'],
    	                colModel:[
    	                    {name:'id',index:'id', 300, sorttype:"int"},
    	               		{name:'name',index:'name', 900,editable:true}
    	             	],
    	             	pager: "#columnPager",
    	             	viewrecords: true,
    	             	sortname: 'name',
    	             	grouping:true,
    	             	groupingView : {
    	               		groupField : ['name']
    	             	},
    	             	caption: "分组"
    		        });
    			});
    		</script>
    	</head>
    	<body>
    		<div>
    			<table id="column"></table>
    			<div id="columnPager"></div>
    		</div>
    	</body>
    </html>
    

    3、问题说明

    (1)jqGrid分组需要添加两个属性

    grouping:true,
    groupingView : {
        groupField : ['name']
    }
    (2)groupField里的内容是分组的字段名


  • 相关阅读:
    设计模式学习--Abstarct Factory
    WPF使用Canvas绘制可变矩形
    离线安装 Android 4.0 SDK
    引用了System.Configuration命名空间,却找不到ConfigurationManager类
    LIBXML2库使用指南2
    Quartz任务调度实践
    FastJson 自定义Serialize、Parser
    maven安装与创建多模块项目
    Zookeeper源码调试环境踩坑记录
    Apache Dubbo时间轮HashedWheelTimer算法的实现原理
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313863.html
Copyright © 2020-2023  润新知