jQuery Treegrid自定义表头（全网独家）附带源码

最新推荐文章于 2023-05-12 14:16:59 发布
最新推荐文章于 2023-05-12 14:16:59 发布
阅读量463 收藏 2
点赞数
分类专栏： 解决问题总归 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40794266/article/details/125158321
版权

背景

业务原因需要定制一些复杂的的表头， 在网上没有找到类似的教程。 但是突然灵机一动，想到了个曲线救国的解决方案。 直接看效果图

在这里插入图片描述

初始化表格

初始化的方法跟原本的方法没有什么区别， 但是需要注意的是，在onLoadSuccess回调方法里执行了mergeCells方法， 该方法是渲染表头的核心方法

jQuery('#treeTable').treegrid({
				// url : window.location.origin+'/imis/dashboard/progress-list.mvc?mode=manufacture',
				url : '${springctx}/imis/productStructure/getProductStructureList.mvc?projectId='+projectId,
				idField : 'productId',
				treeField : 'productName',
				nowrap : true,
				remoteSort : true,
				striped : true,
				pagination : false,
				singleSelect : true,
				checkOnSelect : false,
				selectOnCheck : false,
				checkbox : false,
				editable : true,
				loadMsg: "数据加载中...",
				emptyMsg: '<span style="color: #9E9E9E;">暂无数据！</span>',
				columns:[[
					{field:'productName',title:'名称',width:'200px',
						formatter: function (value, row, index) {
							// return '<a style="cursor:hand" title="'+value+'" οnclick="viewOpt(\'' + row.productId + '\')">'+ value + '</a>'

							return '<span  title="'+value+'">'+ value +'</span>'
						}
					},
					{field:'productNo',title:'料号',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}

					,
					{field:'b1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'s6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}

					,
					{field:'c1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}
				]],
				onLoadSuccess:function(row, data){
					// $(".datagrid-header-rownumber").html('序号')
					// if(data.total==0){
					// 	$('.datagrid-view').css('height','75px!important')
					// }
					mergeCells()
				}
			});



	/**
		 * 合并table的表头
		 * @param 
		 * @returns {string}
		 */
		function mergeCells() {
			// 移除表格的dom
			jQuery(".datagrid-view2 .datagrid-header table").remove();


			// 把表格插入到页面中去
			jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
			jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));

		}

原理

先看一下不执行 mergeCells 方法的正常表格， 此时表头为最底部的那一行
在这里插入图片描述

mergeCells

此方法分为三步

  1. 移除原生表格的表头
  2. 重新定义表格头的高度（因为该高度是计算出得， 所以我们需要重新定义一下）
  3. 把自定义的表头装入treeGrid中
/**
		 * 合并table的表头
		 * @param 
		 * @returns {string}
		 */
		function mergeCells() {
			// 移除表格的dom
			jQuery(".datagrid-view2 .datagrid-header table").remove();


			// 把表格插入到页面中去
			jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
			jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));

		}

源码

<%@ page import="org.springframework.util.StringUtils" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%@ include file="/core/tiles/import_taglib.jsp" %>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<script type="text/javascript" src="dashboard/js/mask.js"></script>
<script type="text/javascript" src="dashboard/js/Util.js"></script>
<%
	String type = request.getParameter("type");
	boolean haveType = StringUtils.hasText(type);
%>

<style>
	body #view_data{
		width:98%;
		padding: 10px;
	}

	.project-info{
		font-weight: bold;
		font-size: 15px;
	}
</style>
<aa:zone name="projectAnDengZone">
	<script type="text/javascript">
		jQuery(function () {
			init()

			jQuery('#search').textbox({
				buttonText:'搜索',
				buttonIcon:'icon-search',
				buttonAlign:'right',
				prompt:'请输入项目名称/项目编号',
				width:250,
				onClickButton:function(){
					jQuery("#fatTable").datagrid({
						queryParams:{
							"keyWord":jQuery('#search').textbox('getValue')
						},
					});
				}
			})
		})

		function init() {
			const projectId = getQueryString("projectId")

			if (!projectId || projectId.trim() === ''){
				alert('无效的项目Id！')
				return
			}

			loadDataGet(window.location.origin+'/imis/project/info.mvc?projectId=' + projectId +'', function (data) {
				if (!data){
					alert('无效的项目Id！')
					return
				}

				jQuery('#projectName').text(data.projectName)
				jQuery('#projectNo').text(data.projectNo)
				jQuery('#projectManager').text(data.projectManagerName)

				tableDefine();
			})
		}

		/**
		 * 合并table的表头
		 * @param
		 * @returns {string}
		 */
		function mergeCells() {
			// 移除表格的dom
			jQuery(".datagrid-view2 .datagrid-header table").remove();


			// 把表格插入到页面中去
			jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
			jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));

		}

		// 获取参数名
		function getQueryString(name) {
			var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return '';
		}

		function tableDefine(){
			const projectId = getQueryString("projectId")

			jQuery('#treeTable').treegrid({
				// url : window.location.origin+'/imis/dashboard/progress-list.mvc?mode=manufacture',
				url : '${springctx}/imis/productStructure/getProductStructureList.mvc?projectId='+projectId,
				idField : 'productId',
				treeField : 'productName',
				nowrap : true,
				remoteSort : true,
				striped : true,
				pagination : false,
				singleSelect : true,
				checkOnSelect : false,
				selectOnCheck : false,
				checkbox : false,
				editable : true,
				loadMsg: "数据加载中...",
				emptyMsg: '<span style="color: #9E9E9E;">暂无数据！</span>',
				columns:[[
					{field:'productName',title:'名称',width:'200px',
						formatter: function (value, row, index) {
							// return '<a style="cursor:hand" title="'+value+'" οnclick="viewOpt(\'' + row.productId + '\')">'+ value + '</a>'

							return '<span  title="'+value+'">'+ value +'</span>'
						}
					},
					{field:'productNo',title:'料号',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'a6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}

					,
					{field:'b1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'b5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'s6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}

					,
					{field:'c1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'c6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d1',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d2',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d3',title:'开始',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d4',title:'完成',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d5',title:'当前进度',width:'50px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					},
					{field:'d6',title:'负责人',width:'100px',align:'left',
						formatter: function (value, row, index) {
							if(value==null){
								return''
							}
							return '<p  title="'+value+'">'+ value +'</p>'
						}
					}
				]],
				onLoadSuccess:function(row, data){
					// $(".datagrid-header-rownumber").html('序号')
					// if(data.total==0){
					// 	$('.datagrid-view').css('height','75px!important')
					// }
					mergeCells()
				}
			});
		}
	</script>

	<div id="view_data">
		<div style="text-align: left; line-height: 30px; padding: 5px 5px 0px 5px;">
			<div class="project-info" style="width: 100%; height: 40px">
				<span>
					<div style="width: 500px; float: left">
						项目名称： <span id="projectName"></span>
					</div>
				</span>
				<span>
					<div style="width: 300px; float: left">
						项目编号： <span id="projectNo"></span>
					</div>
				</span>
				<span>
					<div style="width: 300px; float: left">
						项目经理： <span id="projectManager"></span>
					</div>
				</span>
			</div>
		</div>
		<div style="padding: 0px 5px 0px 5px;; height: 750px">
			<div id="tableHr" style="width: 100%; height: 100%; margin-top: 5px;">
				<table id="treeTable" style="height: 100%"></table>
			</div>

			<%--		表头 	--%>
			<table id="customerHead" class="datagrid-htable" border="0" cellspacing="0" cellpadding="0" style="height: 75px;display: none">
				<tbody>
				<tr class="datagrid-header-row">
					<td rowspan="3" field="productName" class="">
						<div class="datagrid-cell datagrid-cell-c1-productName" style="">
							<span>名称</span>
						</div>
					</td>
					<td rowspan="3" field="productNo" class="">
						<div class="datagrid-cell datagrid-cell-c1-productNo" style="text-align: left;">
							<span>料号</span>
						</div>
					</td>
					<td colspan="6" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
							<span>3D模块发布</span>
						</div>
					</td>

					<td colspan="6" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
							<span>2D图纸</span>
						</div>
					</td>

					<td colspan="6" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
							<span>长期BOM发布</span>
						</div>
					</td>

					<td colspan="6" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
							<span>标准件和非标准件BOM发布</span>
						</div>
					</td>
				</tr>
				<tr class="datagrid-header-row">

					<td colspan="2" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
							<span>计划</span>
						</div>
					</td>
					<td colspan="2" field="a4">
						<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
							<span>实际</span>
						</div>
					</td>
					<td rowspan="2" field="a5">
						<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
							<span>当前进度</span>
						</div>
					</td>
					<td rowspan="2" field="a6" class="">
						<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
							<span>负责人</span>
						</div>
					</td>


					<td colspan="2" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
							<span>计划</span>
						</div>
					</td>
					<td colspan="2" field="a4">
						<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
							<span>实际</span>
						</div>
					</td>
					<td rowspan="2" field="a5">
						<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
							<span>当前进度</span>
						</div>
					</td>
					<td rowspan="2" field="a6" class="">
						<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
							<span>负责人</span>
						</div>
					</td>

					<td colspan="2" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
							<span>计划</span>
						</div>
					</td>
					<td colspan="2" field="a4">
						<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
							<span>实际</span>
						</div>
					</td>
					<td rowspan="2" field="a5">
						<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
							<span>当前进度</span>
						</div>
					</td>
					<td rowspan="2" field="a6" class="">
						<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
							<span>负责人</span>
						</div>
					</td>

					<td colspan="2" field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
							<span>计划</span>
						</div>
					</td>
					<td colspan="2" field="a4">
						<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
							<span>实际</span>
						</div>
					</td>
					<td rowspan="2" field="a5">
						<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
							<span>当前进度</span>
						</div>
					</td>
					<td rowspan="2" field="a6" class="">
						<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
							<span>负责人</span>
						</div>
					</td>
				</tr>
				<tr class="datagrid-header-row">
					<td field="a1">
						<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="a2">
						<div class="datagrid-cell datagrid-cell-c1-a2" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>
					<td field="a3">
						<div class="datagrid-cell datagrid-cell-c1-a3" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="a4">
						<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>

					<td field="b1">
						<div class="datagrid-cell datagrid-cell-c1-b1" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="b2">
						<div class="datagrid-cell datagrid-cell-c1-b2" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>
					<td field="b3">
						<div class="datagrid-cell datagrid-cell-c1-b3" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="b4" class="">
						<div class="datagrid-cell datagrid-cell-c1-b4" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>

					<td field="c1">
						<div class="datagrid-cell datagrid-cell-c1-c1" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="c2">
						<div class="datagrid-cell datagrid-cell-c1-c2" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>
					<td field="c3">
						<div class="datagrid-cell datagrid-cell-c1-c3" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="c4">
						<div class="datagrid-cell datagrid-cell-c1-c4" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>

					<td field="d1">
						<div class="datagrid-cell datagrid-cell-c1-d1" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="d2">
						<div class="datagrid-cell datagrid-cell-c1-d2" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>
					<td field="d3">
						<div class="datagrid-cell datagrid-cell-c1-d3" style="text-align: left;">
							<span>开始</span>
						</div>
					</td>
					<td field="d4" class="">
						<div class="datagrid-cell datagrid-cell-c1-d4" style="text-align: left;">
							<span>完成</span>
						</div>
					</td>

				</tr>
				</tbody>
			</table>
		</div>
	</div>
</aa:zone>
xyang_1128
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery easyui treegrid demo 详解
10-03
**jQuery EasyUI TreeGrid 全面解析：增删改查操作指南** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的组件，如对话框、表单、菜单、树形结构等，帮助开发者快速构建用户界面。TreeGrid 是 EasyUI ...
[Jqgrid动态表头]动态修改Jqgrid表头（标题），通用解决方案
Rain
09-09 7092
先看图 需求：后面几列要求使用三个月的日期，以天为单位排列，也就是至多93列。 看代码 说明：本系统并非采用原生的jqgrid，但是此种解决方案依然适用于原生jqgrid。 解决关键 首先转到浏览器，F12调出控制台，检查jqgrid表头元素，如图： 分析一下，很容易得出，jqgrid渲染出的html结构就是 ..... <th id="自定义表名_字段名称"> <spa...
jqgrid重新加载表头及数据
zhugl11的博客
11-15 7057
jqgrid加载静态数据 不通过设置接口连接，而是自己拼接数据的方式。 $('#gridTable').jqGrid({ datatype: &quot;local&quot;,//数据来源,本地数据 data: grid_data,//grid_data为自己的本地数据（或者内存中的） colModel: colModels,//自己拼装的表头格式 }); 强制...
JQuery TreeGrid 组件详解
X-rapido的专栏
11-04 3339
一、TreeGrid组件相关的类       1、TreeGrid(_config)             _config：json格式的数据，组件所需要的数据都通过该参数提供。         2、TreeGridItem(_root, _rowId, _rowIndex, _rowData)             _root：显示组件实例的目标容器对象。
jqgrid + bootstrap-select 自定义表头列显示隐藏
idweiwei的博客
10-09 3190
项目需求：做一个可供用户自定义选择的表格。先上图： 由于标题&amp;操作是固定项，所以在代码中已经把标题&amp;指南的下拉选项去掉了。 一、bootstrap-select &lt;!-- bootstrap-select --&gt; &lt;link rel="stylesheet" href="../../js_/bootstrap/boo...
jqgrid：表头换行显示+单元格内容过长换行显示
zhangustb
10-27 1001
1.添加自定义的css文件，css内容如下 th.ui-th-column div{ white-space:normal !important; height:auto !important; padding:0px; } 2.html文件中添加对css文件的link <!-- 添加自定义的css，允许jqgrid表头换行 --> <link rel="stylesheet" type="text/css" th:href="@{/js/test/cu
jquery.treegrid.async.js
05-15
使用Bootstrap-table和JQuery TreeGrid插件展示树形表格，实现异步加载大数据量。
jquery-treegrid 树形表格组件
12-25
- `maxazan-jquery-treegrid-447d662` 这个版本号可能是项目的一个特定提交ID，意味着你可以从源码仓库获取到这个特定版本的源代码，以确保使用的版本与描述一致。 - **版本更新**：随着时间的推移，开发者会发布新...
jquery插件treegrid树状表格的使用方法详解（.Net平台）
10-20
《jQuery插件TreeGrid在.Net平台上的应用详解》 jQuery TreeGrid是一款强大的表格插件，它将普通的HTML表格转化为可扩展的树形结构，适用于展示层次化的数据。在.Net平台上，利用jQuery TreeGrid可以实现更加直观和...
jquery.treegrid.min.js
04-06
jquery.treegrid.min.js jquery.treegrid.min.jsjquery.treegrid.min.jsjquery.treegrid.min.js
TreeGrid.js 表格树插件
08-15
基于Jquery的表格树插件，可自定义图标，支持各类js事件，支持打开、关闭所有节点等功能
jQuery EasyUI 树形菜单 - 创建基础树形网格
unber的博客
05-12 260
树形网格（TreeGrid）组件从数据网格（DataGrid）继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格（DataGrid），可以用在树形网格（TreeGrid）中。为了使用树形网格（TreeGrid），用户必须定义 'treeField' 属性，指明哪个字段作为树节点。本教程将向您展示如何使用树形网格（TreeGrid）组件设置一个文件夹浏览。创建树形网格（TreeGrid）
jqgrid 动态表头的实现，以及动态改变表头顺序的实现
ichanghu的博客
10-15 2210
一、实现动态加载表头（根据后台传过来的数据显示表头） 通过ajax请求后台，得到表头数组。 $('#gridTable').jqGrid({ colNames: colNames, //通过ajax请求后台获得的表头数组 colModel: colModels,//根据后台获得的表头数组拼装的表头格式得 }); 二、强制刷新表头及数据 $.ajax({})//之后 $("#gbox_gridTable").remove();//强制清除grid容器的html,这个标签在渲染表格
Jqgrid动态列多表头
weixin_34085658的博客
02-26 597
说明：jqgrid动态多表主要是一级头（栏目）动态和二级表头（栏目1、2、3、4、5...）动态 图例 1：数据源是一个dataTable，拿到数据进行列明循环绑定，此处为二级表头 1 //二级表头 2 var names = []; //显示列名 3 var model = []; //绑定列名 4 ...
jQuery TreeGrid
KuBJavaChengXuYuan的博客
04-19 5091
树形表格插件jQuery TreeGrid 借助树形表格插件jQuery TreeGrid，我们可以以表格的形式来展现那些带有层级关系的数据，比如部门上下级，菜单表等。jQuery TreeGrid的官方地址为：http://maxazan.github.io/jquery-treegrid/。由于这里的使用环境为bootstrap，原始的jQuery TreeGrid插件显得不是那么的灵...
JQuery TreeGrid实现异步加载
程序员命运共同体
05-14 1307
1.工作中遇到的问题 使用Bootstrap-able和JQuery TreeGrid插件实现树形表格。但是一次性加载大量数据（测试数据为2000条），绘制表格的时候会卡死。所以，迫切需要异步加载数据，构建树形表格。 然后就在网上各种搜索，找不到特别合适的。但是一位大佬maskainv给我提供了思路。站位大佬的肩膀上自己编写了一个jquery.treegrid.async.js插件，用于扩展。 初始化treegrid出现的问题 实现异步加载思路 1.一次只加载一级节点，默认加载根节点pa.
基于jquery的树形列表TreeGrid
vv
06-25 7395
因项目近期特殊需要，自己实现了一个TreeGrid  javascript组件。支持多级分页
通过jquery-treegrid+bootstrap实现树形表格
寂寥人生
05-29 728
https://github.com/maxazan/jquery-treegrid
layui treeGrid 通过jquery代码勾选checkbox
最新发布
06-09
您可以使用以下代码来勾选layui treeGrid中的checkbox： ```javascript //获取所有的checkbox元素 var checkboxes = $('.layui-table-body .layui-form-checkbox'); //遍历checkbox元素并勾选 $.each(checkboxes, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值