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

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" οnsubmit="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>';
					}
				}
			]];