新增DataGrid分组表和冻结列的合并单元格支持

This commit is contained in:
thinkgem
2021-10-13 11:01:33 +08:00
parent de21959a80
commit e0c6d3e254

View File

@@ -14,105 +14,105 @@
</div>
</div>
<div class="box-body">
<#form:form id="searchForm" model="${testData}" action="${ctx}/test/testData/listData" method="post" class="form-inline hide"
data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group">
<label class="control-label">单行文本:</label>
<div class="control-inline">
<#form:input path="testInput" maxlength="200" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<label class="control-label">多行文本:</label>
<div class="control-inline">
<#form:input path="testTextarea" maxlength="200" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<label class="control-label">下拉框:</label>
<div class="control-inline width-120">
<#form:select path="testSelect" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">下拉多选:</label>
<div class="control-inline width-120">
<#form:select path="testSelectMultiple" dictType="sys_menu_type" multiple="true" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">单选框:</label>
<div class="control-inline">
<#form:radio path="testRadio" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">复选框:</label>
<div class="control-inline">
<#form:checkbox path="testCheckbox" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">日期选择:</label>
<div class="control-inline">
<#form:input path="testDate_gte" readonly="true" maxlength="20" class="form-control laydate width-date"
dataFormat="date" data-type="date" data-format="yyyy-MM-dd" data-done="testDate_lte.click()"/>
&nbsp;-&nbsp;
<#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control laydate width-date"
dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
</div>
</div>
<div class="form-group">
<label class="control-label">日期时间:</label>
<div class="control-inline">
<#form:input path="testDatetime_gte" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm" data-done="testDatetime_lte.click()"/>
&nbsp;-&nbsp;
<#form:input path="testDatetime_lte" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm"/>
</div>
</div>
<div class="form-group">
<label class="control-label">用户选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testUser" title="用户选择"
path="testUser.userCode" labelPath="testUser.userName"
url="${ctx}/sys/office/treeData?isLoadUser=true" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">机构选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testOffice" title="机构选择"
path="testOffice.officeCode" labelPath="testOffice.officeName"
url="${ctx}/sys/office/treeData" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">区域选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testAreaCode" title="区域选择"
path="testAreaCode" labelPath="testAreaName"
url="${ctx}/sys/area/treeData" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">状态:</label>
<div class="control-inline width-120">
<#form:select path="status" dictType="sys_search_status" blankOption="true" class="form-control isQuick"/>
</div>
</div>
<div class="form-group">
<label class="control-label">备注信息:</label>
<div class="control-inline">
<#form:input path="remarks" maxlength="500" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm">查询</button>
<button type="reset" class="btn btn-default btn-sm">重置</button>
</div>
</#form:form>
<#form:form id="searchForm" model="${testData}" action="${ctx}/test/testData/listData" method="post" class="form-inline hide"
data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group">
<label class="control-label">单行文本:</label>
<div class="control-inline">
<#form:input path="testInput" maxlength="200" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<label class="control-label">多行文本:</label>
<div class="control-inline">
<#form:input path="testTextarea" maxlength="200" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<label class="control-label">下拉框:</label>
<div class="control-inline width-120">
<#form:select path="testSelect" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">下拉多选:</label>
<div class="control-inline width-120">
<#form:select path="testSelectMultiple" dictType="sys_menu_type" multiple="true" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">单选框:</label>
<div class="control-inline">
<#form:radio path="testRadio" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">复选框:</label>
<div class="control-inline">
<#form:checkbox path="testCheckbox" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label">日期选择:</label>
<div class="control-inline">
<#form:input path="testDate_gte" readonly="true" maxlength="20" class="form-control laydate width-date"
dataFormat="date" data-type="date" data-format="yyyy-MM-dd" data-done="testDate_lte.click()"/>
&nbsp;-&nbsp;
<#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control laydate width-date"
dataFormat="date" data-type="date" data-format="yyyy-MM-dd"/>
</div>
</div>
<div class="form-group">
<label class="control-label">日期时间:</label>
<div class="control-inline">
<#form:input path="testDatetime_gte" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm" data-done="testDatetime_lte.click()"/>
&nbsp;-&nbsp;
<#form:input path="testDatetime_lte" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm"/>
</div>
</div>
<div class="form-group">
<label class="control-label">用户选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testUser" title="用户选择"
path="testUser.userCode" labelPath="testUser.userName"
url="${ctx}/sys/office/treeData?isLoadUser=true" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">机构选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testOffice" title="机构选择"
path="testOffice.officeCode" labelPath="testOffice.officeName"
url="${ctx}/sys/office/treeData" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">区域选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="testAreaCode" title="区域选择"
path="testAreaCode" labelPath="testAreaName"
url="${ctx}/sys/area/treeData" allowClear="true"/>
</div>
</div>
<div class="form-group">
<label class="control-label">状态:</label>
<div class="control-inline width-120">
<#form:select path="status" dictType="sys_search_status" blankOption="true" class="form-control isQuick"/>
</div>
</div>
<div class="form-group">
<label class="control-label">备注信息:</label>
<div class="control-inline">
<#form:input path="remarks" maxlength="500" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm">查询</button>
<button type="reset" class="btn btn-default btn-sm">重置</button>
</div>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
</div>
@@ -207,6 +207,9 @@ $('#dataGrid').dataGrid({
// 加载成功后执行事件
ajaxSuccess: function(data){
// 分组和冻结列情况下的合并单元格测试
//$('#dataGrid').dataGrid("mergeCell", "testInput,id");
// ================ 启用合计行 BEGIN ==============
// showFooter: true, // 是否显示底部合计行
// 第 1 种方法请求完成之后通过js设置举例如下