Jquery easyui datagrid 模板，动态切换表头

最新推荐文章于 2023-11-02 20:26:16 发布

weixin_33834628

最新推荐文章于 2023-11-02 20:26:16 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/yuhonglei4025/blog/7019

本文介绍了一种通过JavaScript和JQuery动态加载Datagrid表头的方法。该方法使用同步加载方式从外部JS文件获取表头数据，并在FORM表单提交时触发数据加载事件更新Datagrid内容。此外还展示了如何阻止表单自动提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

datagrid的表头可以动态切换，这里把表头写在JS脚本里面，使用JQuery可以方便的读取JS文件，可以通过建立click等事件来触发事件。

首先使用同步方法加载JS表头，并构建一个无数据的datagrid，注意这里fit:true需要使用布局layout。

var templateFrozenColumns = [[]];
var templateColumns = [[]];
var getScriptUrl = 'test.js';
$(function(){
			$.ajax({
				async: false,
				url: getScriptUrl,
				dataType: 'script',
	            success: function(data) {
					templateFrozenColumns = frozenColumns;
					templateColumns = columns;
	            }
			});

			$('#table').datagrid({
				nowrap: false,
				striped: true,
				collapsible:true,
				frozenColumns:templateFrozenColumns,
				columns:templateColumns,
				pagination:false,
				singleSelect: true,
				rownumbers:true,
				fit:true
			});
		});

在FORM表单提交时，触发数据加载事件：

function ajaxSubmit(){
			$('#table').datagrid({
				url: url,
				queryParams : {
					id:$('#id').val()
},
				frozenColumns:templateFrozenColumns,
				columns:templateColumns
			});
		}

禁止表单自动提交是我们常用的一个做法：

<form name="receiptForm" onsubmit="return false;">
<fieldset>
<div>
<label for="id">编号</label>
<input type="text" name="id" id="id" />
</div>
<div>
<label for="name">姓名</label>
<input type="text" name="name" id="name" />
</div>
<input type="button" class="button" onClick="ajaxSubmit();" value="查询" />
</fieldset>
</form>

在适当的页面位置，我们加入自己的表格：

<table id="table"></table>

最后还需要test.js中写入表头：

var frozenColumns = [[
                      {field:'ck',checkbox:true},
                      {title:'code',field:'code',width:80,sortable:true}
      			]];
var columns = [[
		        {title:'Base Information',colspan:3},
				{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
					formatter:function(value,rec){
						return '<span style="color:red">Edit Delete</span>';
					}
				}
			]];

转载于:https://my.oschina.net/yuhonglei4025/blog/7019