easyui使用detailview创建子网格数据

最新推荐文章于 2023-05-05 08:42:36 发布
最新推荐文章于 2023-05-05 08:42:36 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42828211/article/details/83105844
版权

效果图(网上copy的图片，使用方法请关注下方)：

在这里插入图片描述

使用方法：
html页面除了基本的css和js外，创建分组子网格还需引入下方js，请自行下载。

		<script type="text/javascript" src="../../easyui/datagrid-detailview.js"></script>

首先，在html页面创建table，table的class为 class=“easyui-datagrid”，此处略。
其次，使用js创建子网格数据（detailview）

$(function(){
	$('#broTable').datagrid({
		view: detailview,
		detailFormatter:function(index,row){
			return '<div style="padding:1px"><table id="ddv" class="ddv"></table></div>';
		},
		onExpandRow: function(index,row){
			var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
			var tempindexc = -1;
			var editIndex;	//上一个index
			var ddvProgram; //单击选中单条数据
			var bro = $("#broDate").datebox("getValue");
			id = row.id;
     		var sysDate = new Date();
    		var date = sysDate.getDate();
    		if (date >= 0 && date <= 9) {
    			date = "0" + date;
    		}
    		var b = sysDate.getFullYear()+"-"+(sysDate.getMonth()+1)+"-"+date;
			if(bro == null || bro == "选择日期或查询"){
				bro = sysDate.getFullYear()+"-"+(sysDate.getMonth()+1)+"-"+date;
			}
		    var rows = $('#broTable').datagrid('getRows');
		    $.each(rows,function(i,k){
		        //获取当前所有展开的子网格
		        var expander = $('#broTable').datagrid('getExpander',i);
		        if(expander.length && expander.hasClass('datagrid-row-collapse')){
		            if(k.id != row.id){
		                //折叠上一次展开的子网格
		                $('#broTable').datagrid('collapseRow',i);
		            }
		        }
		    });
			ddv.datagrid({
				url:'anchProgramAction!selectAll.action?broDate='+bro.toString()+'&channelId='+row.id,
				fitColumns:true,
				singleSelect:true,
				rownumbers:true,
				loadMsg:'正在加载...',
				height:'auto',
				columns:[[
						{field:'srName',title:'素材名称',width:230,align:'center'},
						{field:'srTimes',title:'视频时长',width:100,align:'center'},
						{field:'srSize',title:'视频大小',width:100,align:'center'},
						{field:'srWidth',title:'视频尺寸',width:100,align:'center'},
						{field:'broDate',title:'播出时间',width:180,align:'center'},
						{field:'beginDate',title:'视频起始时间',width:180,align:'center',
							editor:{type:'timespinner',options:{required : true, editable:false, showSeconds:true}},
							formatter:function formatDateStr(value,rowData,index){
								if(value.split("T").length>1){
									value = value.split("T")[1];
								}
								return value;
								}
							},
						{field:'endDate',title:'视频结束时间',width:180,align:'center',
							editor:{type:'timespinner',options:{required :true , editable:false,showSeconds:true}},
							formatter:function formatDateStr(value,rowData,index){
								if(value.split("T").length>1){
									value = value.split("T")[1];
								}
								return value;
							}
						},
						{field:'broTimes',title:'编辑后时长',width:130,align:'center'},
				]],
				onResize:function(){
					$('#broTable').datagrid('fixDetailRowHeight',index);//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度
				},
				onLoadSuccess:function(data){
					setTimeout(function(){
						$('#broTable').datagrid('fixDetailRowHeight',index);//在加载父列表明细成功时，获取此时整个列表的高度，使其适应变化后的高度，此时的索引
					});
				},
				onCheck:function(rowIndex,rowData){
					tData = ddv.datagrid('getData');
					tempindexc = rowIndex;
					ddvProgram = rowData;
				},
				toolbar:[
				         {
				        	id:'saveId',
				        	text:'保存',
				        	iconCls:'icon-save',
				        	handler:function(){
				        	 	if(b > bro){
				        	 		$.messager.alert("提示","小于今天日期禁止保存！","info");
				        	 	}else{
			        	 			$.messager.confirm("提示", "确定保存数据？", function(r){
			        	 				if(r){
			        	 					if (ddv.datagrid('validateRow', tempindexc)){
			        	 						ddv.datagrid('endEdit', editIndex);
			        	 						if(ddvCheckDateTime()){
			        	 							var json = JSON.stringify(ddv.datagrid("getData").rows);
			        	 							saveEditBroplan(json, row.id);
			        	 							editIndex = undefined;  
			        	 						}else{
			        	 							ddv.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
			        	 							return false;
			        	 						}
			        	 					}
			        	 				}
			        	 			});
				        	 	}
							    function ddvCheckDateTime(){
							    	var r = ddv.datagrid("getRows")[editIndex];
							    	oldChannelData = r;
							    	if(r == undefined){
							        	var json = JSON.stringify(ddv.datagrid("getData").rows);
							        	saveEditBroplan(json, row.id);
							        	editIndex = undefined;  
//							        	$('#saveId').linkbutton("disable");  //禁止button
							    	}else{
							    		var beginTime = ddvFormatTime(r.beginDate);
							    		var endTime = ddvFormatTime(r.endDate);
							    		var time = ddvFormatTime(r.srTimes);
							    		if(endTime>time){
							    			$.messager.alert("提示","结束播放时间超出素材总时长！","info");
							    			return false;
							    		}
							    		if((endTime-beginTime)==0){
							    			$.messager.alert("提示","素材播放时长必须大于0秒！","info");
							    			return false;
							    		}
							    		if(beginTime>time){
							    			$.messager.alert("提示","开始播放时间超出素材总时长！","info");
							    			return false;
							    		}
							    		r.broTimes = ddvFormatSeconds(endTime-beginTime);
							    		var broRows = ddv.datagrid("getRows");
							    		var all = {'total':0,'rows':[]};
							    		all.rows = ddvFormatRows(broRows);
							    		ddv.datagrid("loadData",all);
							    		changedDate = all.rows;
							    		return true;
							    	}
							    }
				         	}
				         },
				         {
				        	 id:'addId',
				        	 text:'添加',
				        	 iconCls:'icon-add',
				        	 handler:function(){
				        	 	if(b > bro){
				        	 		$.messager.alert("提示","小于今天日期禁止添加！","info");
				        	 	}else{
				        	 		$('#add_tbb').dialog({
				        	 			width:1000,
				        	 			height:500,
				        	 			title:"添加",
				        	 			iconCls:"icon-add",
				        	 			href:"safetyCkList.html",
				        	 		});
				        	 		selectChannel(row);
				        	 	}
				         	}
				         },
				         {
				        	 id:'deleteId',
				        	 text:'删除',
				        	 iconCls:'icon-remove',
				        	 handler:function(){
				        	 	if(b > bro){
				        	 		$.messager.alert("提示","小于今天日期禁止删除！","info");
				        	 	}else{
				        	 		if(ddvProgram != null){
				        	 			$.messager.confirm("提示", "确定删除吗？", function(r){
				        	 				if(r){
				        	 					var rows = ddv.datagrid("getRows");
				        	 					if(tempindexc == 0){
//				        	 						if(rows.length == 1){
//				        	 							rows.splice(tempindexc,1);
//				        	 						}else{
				        	 							rows.splice(tempindexc,1);
//				        	 							rows[0].broDate = ddvProgram.broDate;
				        	 							oldChannelData = ddvProgram;
//				        	 						}
				        	 						var ddvData = JSON.stringify(ddv.datagrid("getData").rows);
				        	 						deleteRow(ddvProgram,ddvData,row.id);
				        	 					}else{
				        	 						rows.splice(tempindexc,1);
				        	 						oldChannelData = ddvProgram;
				        	 						var ddvData = JSON.stringify(ddv.datagrid("getData").rows);
				        	 						deleteRow(ddvProgram,ddvData,row.id);
				        	 					}
				        	 					var all = {'total':0,'rows':[]};
				        	 					all.rows = ddvFormatRows(rows);
				        	 					ddv.datagrid("loadData",all);
				        	 					changedDate = all.rows;
				        	 					ddvProgram = null;
				        	 				}
				        	 			});
				        	 		}else{
				        	 			$.messager.alert("提示", "请选择数据！", "info");
				        	 		}
				        	 	}
					         }
				         },
				         {
				        	 text:'预览',
				        	 iconCls:'icon-reload',
				        	 handler:function(){
				        	 	if(ddvProgram == null){
				        	 		$.messager.alert("提示", "请选择数据！", "info");
				        	 	}else{
				        	 		showVideo(ddvProgram);
				        	 	}
				        	 }
				         },
				         {
				        	 text:'上移',
				        	 iconCls: 'icon-undo',
				        	 handler:function(){
				        	 	if(b > bro){
				        	 		$.messager.alert("提示","小于今天日期禁止移动！","info");
				        	 	}else{
				        	 		          if (isEdite == false) {
				        	 			              var data = tData;
				        	 			              if (tempindexc < 0) {
				        	 				                  $.messager.alert("错误", "请先选择一条数据！", "error");
				        	 				              } else if (tempindexc == 0) {
				        	 					                  $.messager.alert("提示", "已经是第一行了！", "info");
				        	 					              } else {
				        	 						                  var temprow = data.rows[tempindexc];
				        	 						                  data.rows[tempindexc] = data.rows[parseInt(tempindexc) - 1];
				        	 						                  data.rows[parseInt(tempindexc) - 1] = temprow;
				        	 						                  var temprowval = data.rows[tempindexc].OrderList;
				        	 						                  data.rows[parseInt(tempindexc)].OrderList = data.rows[parseInt(tempindexc) - 1].OrderList;
				        	 						                  data.rows[parseInt(tempindexc) - 1].OrderList = temprowval;
				        	 						                  ddv.datagrid("selectRow", parseInt(tempindexc) - 1);
								        	 						//得到移动数据的上一条编辑后时长
								        	 						oldChannelData = temprow;
								        	 						var all = {'total':0,'rows':[]};
								        	 						var state = "undo";
								        	 						all.rows = ddvFormat(data.rows,state);
								        	 						ddv.datagrid("loadData",all);
								        	 						changedDate = all.rows;
				        	 						              }
				        	 			          }
				        	 		          else {
				        	 			              $.messager.alert("错误", "请先保存数据！", "error");
				        	 			          }
				        	 	}
				        	 
				         }
				         },
				         {
				        	 text:'下移',
				        	 iconCls: 'icon-redo',
				        	 handler:function(){
				        	 	if(b > bro){
				        	 		$.messager.alert("提示","小于今天日期禁止移动！","info");
				        	 	}else{
		        	 		          if (isEdite == false) {
		        	 			              var data = tData;
		        	 			              if (tempindexc < 0) {
		        	 				                  $.messager.alert("错误", "请先选择一条数据！", "error");
		        	 				              } else if (tempindexc == data.rows.length - 1) {
		        	 					                  $.messager.alert("提示", "已经是最后一行了！", "info");
		        	 					              } else {
		        	 						                  var temprow = data.rows[tempindexc];
		        	 						                  // 移动行的索引 加1
		        	 						                  data.rows[tempindexc] = data.rows[parseInt(tempindexc) + 1];
		        	 						                  data.rows[parseInt(tempindexc) + 1] = temprow;
		        	 						                  var temprowval = data.rows[tempindexc].OrderList;
		        	 						                  data.rows[parseInt(tempindexc)].OrderList = data.rows[parseInt(tempindexc) + 1].OrderList;
		        	 						                  data.rows[parseInt(tempindexc) + 1].OrderList = temprowval;
		        	 						                  ddv.datagrid("selectRow", parseInt(tempindexc) + 1);
						        	 						oldChannelData = temprow;
						        	 						var all = {'total':0,'rows':[]};
						        	 						var state = "redo";
						        	 						all.rows = ddvFormatUp(data.rows,state);
						        	 						ddv.datagrid("loadData",all);
						        	 						changedDate = all.rows;
		        	 						              }
		        	 			          }
		        	 		          else {
		        	 			              $.messager.alert("错误", "请先保存数据！", "error");
		        	 			          }
				        	 	}
			         
			         }
			         },
			         {
			        	 id:'edit',
			        	 text:'编辑',
			        	 iconCls:'icon-edit',
			        	 handler:function(){
			        	 	if(b > bro){
			        	 		$.messager.alert("提示","小于今天日期禁止编辑！","info");
			        	 	}else{
			        	 		if (editIndex != tempindexc){  
			        	 			if (ddvEndEditing()){
			        	 				ddv.datagrid('beginEdit', tempindexc);
			        	 				var v = ddv.datagrid('selectRow', tempindexc).datagrid('beginEdit', tempindexc);  
			        	 				editIndex = tempindexc; 
			        	 			} else {  
//							        	ddv.datagrid('beginEdit', rowIndex);
			        	 				ddv.datagrid('selectRow', editIndex);  
			        	 			}  
			        	 		}
			        	 	}
						    function ddvEndEditing(){  
						    	if (editIndex == undefined){return true} 
						    	if (ddv.datagrid('validateRow', editIndex)){
						            ddv.datagrid('endEdit', editIndex);
						            if(ddvCheckDateTime()){
						            	editIndex = undefined;  
						    	        return true;
						            }else{
						            	ddv.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
						            	return false;
						            }
						        } else {  
						            return false;  
						        }  
						    }
						    function ddvCheckDateTime(){
						    	var row = ddv.datagrid("getRows")[editIndex];
						    	oldChannelData = row;
						    	var beginTime = ddvFormatTime(row.beginDate);
						    	var endTime = ddvFormatTime(row.endDate);
						    	var time = ddvFormatTime(row.srTimes);
						    	if(endTime>time){
						    		$.messager.alert("提示","结束播放时间超出素材总时长！","info");
						    		return false;
						    	}
						    	if((endTime-beginTime)==0){
						    		$.messager.alert("提示","素材播放时长必须大于0秒！","info");
						    		return false;
						    	}
						    	if(beginTime>time){
						    		$.messager.alert("提示","开始播放时间超出素材总时长！","info");
						    		return false;
						    	}
						    	row.broTimes = ddvFormatSeconds(endTime-beginTime);
						    	var broRows = ddv.datagrid("getRows");
						    	var all = {'total':0,'rows':[]};
						    	all.rows = ddvFormatRows(broRows);
						    	ddv.datagrid("loadData",all);
						    	changedDate = all.rows;
						    	return true;
						    }
			         	}
			         }]
		});
		$('#broTable').datagrid('fixDetailRowHeight',index);
	}		
});
});

function ddvFormatRows(rows){
	var beginTime = oldChannelData.beginDate;//获取修改的播放时间
	for ( var i = 0; i < rows.length; i++) {//循环数据，根据天分割来修改时间
		var date;
		if(i == 0){
			date = rows[i].broDate.substring(11);
			rows[i].broDate = rows[i].broDate;
		}else{
			if(rows[i].broDate.substring(0,11) == rows[i-1].broDate.substring(0,11)){
				date = rows[i-1].broDate.substring(11);
				rows[i].broDate =  rows[i-1].broDate.substring(0,11) +" "+ddvCountBeginTime(date,rows[i-1].broTimes);//将时间（时分秒）传入并修改，方法如下
			}else{
				break;
			}
		}
	}
	return rows;
}
function ddvFormat(rows,state){
	var beginTime = oldChannelData.beginDate;//获取修改的播放时间
	if(beginTime.indexOf("T") != -1){
		beginTime = beginTime.substring(11);
	}
	for ( var i = 0; i < rows.length; i++) {//循环数据，根据天分割来修改时间
		var date;
		if(i == 0){
			if(rows[i].id == oldChannelData.id){
				if(state == "redo"){
					rows[i].broDate = rows[i].broDate;
				}else{
				date = rows[i].broDate.substring(11);
				rows[i].broDate = rows[i + 1].broDate;
				}
			}else{
				if(state == "redo"){
					rows[i].broDate = rows[i].broDate;
				}else{
					rows[i].broDate = rows[i].broDate;
				}
				
			}
		}else{
			if(rows[i].broDate.substring(0,11) == rows[i-1].broDate.substring(0,11)){
				date = rows[i-1].broDate.substring(11);
				rows[i].broDate =  rows[i-1].broDate.substring(0,11) +" "+ddvCountBeginTime(date,rows[i-1].broTimes);//将时间（时分秒）传入并修改，方法如下
			}else{
				continue;
			}
		}
	}
	return rows;
}
function ddvFormatUp(rows,state){
	var beginTime = oldChannelData.beginDate;//获取修改的播放时间
	if(beginTime.indexOf("T") != -1){
		beginTime = beginTime.substring(11);
	}
	for ( var i = 0; i < rows.length; i++) {//循环数据，根据天分割来修改时间
		var date;
		if(i == 0){
			if(rows[i+1].id == oldChannelData.id){
				if(state == "redo"){
					rows[i].broDate = rows[i + 1].broDate;
				}else{
					date = rows[i].broDate.substring(11);
					rows[i].broDate = rows[i + 1].broDate;
				}
			}else{
				if(state == "redo"){
					rows[i].broDate = rows[i].broDate;
				}else{
					rows[i].broDate = rows[i].broDate;
				}
				
			} 
		}else{
			if(rows[i].broDate.substring(0,11) == rows[i-1].broDate.substring(0,11)){
				date = rows[i-1].broDate.substring(11);
				rows[i].broDate =  rows[i-1].broDate.substring(0,11) +" "+ddvCountBeginTime(date,rows[i-1].broTimes);//将时间（时分秒）传入并修改，方法如下
			}else{
				continue;
			}
		}
	}
	return rows;
}
function ddvCountBeginTime(beginTime,length){
	var broDate =  parseInt(ddvFormatTime(beginTime) + ddvFormatTime(length));
	return ddvFormatSeconds(broDate);//时间转换
}
function ddvFormatTime(time){
	var timeArr = time.split(":");
	var hh = 0;
	var mi = 0;
	var ss = parseInt(timeArr[eval(timeArr.length-1)]);
	var seconds = 0;
	if(timeArr.length==3){
		hh = parseInt(timeArr[0]*60*60);
		mi = parseInt(timeArr[1]*60);
	}
	if(timeArr.length==2){
		mi = parseInt(timeArr[0]*60);
	}
	seconds = parseInt(hh + mi + ss);
	return seconds;
}
function ddvFormatSeconds(seconds){
	var theTime = 0;
	theTime = parseInt(seconds);// 秒
   var theTime1 = 0;// 分
   var theTime2 = 0;// 小时
   if(theTime > 60) {
      theTime1 = parseInt(theTime/60);
      theTime = parseInt(theTime%60);
      if(theTime1 > 60) {
         theTime2 = parseInt(theTime1/60);
         theTime1 = parseInt(theTime1%60);
       }
   }
   var result;
   result = (parseInt(theTime2)<10?"0"+theTime2:theTime2)+":"+(parseInt(theTime1)<10?"0"+theTime1:theTime1)+":"+(parseInt(theTime)<10?"0"+theTime:theTime);
   return result;
}
function selects(b){
	$.post('anchChannelAction!selectAsList.action?t='+new Date(),{broDate:b},function(data){
		eval("data="+data);
		$("#broTable").datagrid("loadData",data["rows"]);
	});
}
在路上～
关注
专栏目录
【EasyUI】DataGrid DetailView（数据表格详细展示）
南朋友的博客
08-15 5048
效果图： 第一步：创建一个HTML页面 <head> <script type="text/javascript" src="datagrid-detailview.js"></script> </head> <body> <table id="tt"></table> <...
EasyUI datagrid-detailview
qq_43710927的博客
09-28 614
datagrid-detailview的简单使用
新手学EasyUI（八）----SubGrid三级嵌套
weixin_33913332的博客
11-29 227
最近做的项目中要实现一项功能，如下： 本来是想用tree来实现的，但是无奈时间紧张，能力有限，暂时没有方法来实现这样的树，于是就换了一种方式。在EasyUi中有一种表格可以满足上面的样式—–SubGrid表格 STEP1 创建主网格 <table id="subDatagrid" style="width...
jQuery EasyUI使用教程之创建具有主数据网格的子网格
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-18 2261
使用数据网格的详细视图，用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细，子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。 jQuery EasyUI最新试用版下载请猛戳>> 查看jQuery EasyUI演示 Step 1：创建主数据网格 1 2 3 4 5 6 7
42EasyUI 数据网格- 创建子网格
阿甘兄
04-17 503
本文将向您展示如何在主网格上创建一个子网格。 步骤 1：创建主网格 <table id="dg" style="width:700px;height:250px" url="datagrid22_getdata.php" title="DataGrid - SubGrid" singleSelect="true" fitColumns="t...
Easyui datagrid detailview使用简介
无怨无悔专栏
04-03 1026
、easyui 的 detailview又叫subgrid其实也就类似于分组表格的意思，先见效果图 二、下面说下使用方法 1.页面引入样式 2.引入脚本 detailview.js官网下载的包应该没有，不过也很好获得，我们在看在线demo的时候可以看到detailview的路径，然后下载下来，这里就直接贴出了方便大家下载http:
easyui datagrid插件 datagrid-detailview.js
07-09
支持datagrid扩展，在一条记录下面可以嵌套一个子datagrid，切记要在页面中引入该js
jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能
04-01
jquery-easyui的扩展组件jquery-easyui-datagridview，其中的datagrid-detailview.js可方便地生成子网格，但是每行均默认生成展开按钮，实际我们希望对某些行不显示展开按钮，网上很多人提供的解决方案就是通过dom...
java easyUI实现自定义网格视图实例代码
08-26
在本文中，我们将探讨如何使用Java EasyUI实现自定义网格视图。EasyUI 是一个基于jQuery的用户界面插件集，它允许开发者通过简单的HTML标记创建交互式的JavaScript应用程序，而无需编写大量代码。这个框架提供了丰富...
【项目实战】---Easyui datagrid detailview使用简介
一路向前！
10-23 2572
前言： 之前对于esayUI的了解是仅仅是停留在对datagrid的简单应用上，这次有机会了解和学习数据网格详细视图即DataGrid DetailView，还是很有意思的。所谓的数据网格详细视图可以理解为SubGrid即次网格，在网格中还包含着网格，通过点击事件达到折叠或展开的效果。 实现： 1、引入页面样式和脚本 这里要
easyui datagrid-detailview
06-12
这个是兼容1.3.1版本的，现在官方1.3.3版本的detailview是不兼容1.3.1的 想要更多easyui的案例解析可以下这个http://download.csdn.net/detail/oushaomeng2011/5480233
EasyUI折叠表格层次显示detailview详解及实例
08-31
主要介绍了EasyUI折叠表格层次显示detailview详解及实例,非常不错，具有参考借鉴价值，需要的朋友参考下吧
datagrid-detailview
11-28
easyUI表格镶嵌子表格插件，导入这个js后就可以愉快的使用表格嵌套了
datagrid-detailview.js
05-25
jquery 插件 高性能的js模板引擎 datagrid-detailview.js 反正就是他的插件。
EasyUI 数据网格视图（DataGrid View）
小七的博客
05-08 2273
用法 步骤 1：创建一个 HTML 页面 type="text/javascript" src="datagrid-detailview.js"> id="tt"> 步骤 2：创建数据网格（DataGrid） $('#tt').datagrid({ title:'DataGrid - DetailView', width:500, height:250, remoteSort:fal
jQuery EasyUI 数据网格 - 创建子网格
最新发布
unber的博客
05-05 156
当用户点击展开按钮（'+'）时，'onExpandRow' 事件将被触发。我们创建一个新的带有三列的子网格。当子网格数据加载成功时或者改变尺寸大小时，请记得对主网格调用 'fixDetailRowHeight' 方法。使用数据网格（datagrid）的详细视图，用户可以展开一行来显示附加的详细信息。任何内容都可以加载作为行详细，子网格也可以动态加载。本教程将向您展示如何在主网格上创建一个子网格。为了使用详细视图，请记得在页面头部引用视图脚本文件。步骤 2：设置详细视图来显示子网格。步骤 1：创建主网格。
jQuery EasyUI 数据网格 - 创建列组合
unber的博客
04-27 192
为了创建列组合，您应该定义数据网格（datagrid）插件的 columns 数据。列的每个元素是定义一组可使用 rowspan 或 colspan 属性来进行组合的单元格。在本实例中，我们使用平面数据来填充数据网格（DataGrid）的数据，并把 listprice、unitcost、addr1、status 列组合在一个单一的列下。
jQuery EasyUI使用教程之创建复杂的树网格
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-20 828
树网格可以展示有限空间上附带的多列和复杂数据电子表格。本教程将演示如何将表格数据排列在分割的网格和多行表头中，以便组织共同的数据。 jQuery EasyUI最新试用版下载请猛戳>> 点击查看示例 创建树形网格 1 2 3 4 5 6 7 8 9 10 11 12 13
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值