DataGrid多表头、行分组、合计行、小计行、编辑表格，实例
This commit is contained in:
thinkgem
@@ -5,6 +5,7 @@ package com.jeesite.modules.state.web;
|
||||
|
||||
import org.apache.shiro.authz.annotation.RequiresPermissions;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
/**
|
||||
@@ -18,7 +19,8 @@ public class ServerStateController {
|
||||
|
||||
@RequiresPermissions("sys:state:server")
|
||||
@RequestMapping(value="")
|
||||
public String index(){
|
||||
public String index(Model model){
|
||||
model.addAttribute("message", "正在研发中，敬请期待！");
|
||||
return "modules/state/serverIndex";
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
*/
|
||||
package com.jeesite.modules.test.web;
|
||||
|
||||
import org.apache.shiro.authz.annotation.RequiresPermissions;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
import com.jeesite.common.lang.StringUtils;
|
||||
import com.jeesite.common.web.BaseController;
|
||||
import com.jeesite.modules.test.entity.TestData;
|
||||
import com.jeesite.modules.test.service.TestDataService;
|
||||
|
||||
/**
|
||||
* 演示实例Controller
|
||||
* @author ThinkGem
|
||||
* @version 2018-03-24
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping(value = "${adminPath}/demo")
|
||||
public class DemoController extends BaseController {
|
||||
|
||||
@Autowired
|
||||
private TestDataService testDataService;
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
*/
|
||||
@ModelAttribute
|
||||
public TestData get(String id, boolean isNewRecord) {
|
||||
return testDataService.get(id, isNewRecord);
|
||||
}
|
||||
|
||||
/**
|
||||
* DataGrid
|
||||
*/
|
||||
@RequiresPermissions("test:testData:view")
|
||||
@RequestMapping(value = "dataGrid/{viewName}")
|
||||
public String dataGrid(@PathVariable String viewName, TestData testData, Model model) {
|
||||
return "modules/demo/dataGrid" + StringUtils.cap(viewName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Form
|
||||
*/
|
||||
@RequiresPermissions("test:testData:view")
|
||||
@RequestMapping(value = "form/{viewName}")
|
||||
public String form(@PathVariable String viewName, TestData testData, Model model) {
|
||||
return "modules/demo/form" + StringUtils.cap(viewName);
|
||||
}
|
||||
|
||||
}
|
||||
238
web/src/main/resources/views/modules/demo/dataGridEditGrid.html
Normal file
238
web/src/main/resources/views/modules/demo/dataGridEditGrid.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<% layout('/layouts/default.html', {title: '数据管理', libs: ['dataGrid','validate']}){ %>
|
||||
<div class="main-content">
|
||||
<div class="box box-main">
|
||||
<div class="box-header">
|
||||
<div class="box-title">
|
||||
<i class="fa fa-list-alt"></i> 数据管理
|
||||
</div>
|
||||
<div class="box-tools pull-right">
|
||||
<a href="#" class="btn btn-default" id="btnSearch" title="查询"><i class="fa fa-filter"></i> 查询</a>
|
||||
<% if(hasPermi('test:testData:edit')){ %>
|
||||
<a href="#" id="dataGridAddRowBtn" class="btn btn-default"><i class="fa fa-plus"></i> 增行</a>
|
||||
<% } %>
|
||||
</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 Wdate-date"
|
||||
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,onpicked:function(){testDate_lte.click()}});"/>
|
||||
--
|
||||
<#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control Wdate-date"
|
||||
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
|
||||
</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 Wdate-datetime"
|
||||
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,onpicked:function(){testDatetime_lte.click()}});"/>
|
||||
--
|
||||
<#form:input path="testDatetime_lte" readonly="true" maxlength="20" class="form-control Wdate-datetime"
|
||||
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
|
||||
</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"/>
|
||||
</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="inputForm" model="${testData}" action="${ctx}/test/testData/save" method="post" class="form-horizontal">
|
||||
<table id="dataGrid"></table>
|
||||
<div id="dataGridPage"></div>
|
||||
</#form:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<script>
|
||||
// 初始化DataGrid对象
|
||||
$('#dataGrid').dataGrid({
|
||||
searchForm: $("#searchForm"),
|
||||
// 设置数据表格列
|
||||
columnModel: [
|
||||
{header:'状态', name:'status', editable:true, hidden:true},
|
||||
{header:'主键', name:'id', editable:true, hidden:true},
|
||||
{header:'单行文本', name:'testInput', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'200', 'class':'form-control'}},
|
||||
{header:'多行文本', name:'testTextarea', width:150, editable:true, edittype:'textarea', editoptions:{'maxlength':'200', 'class':'form-control', 'rows':'1'}},
|
||||
{header:'下拉框', name:'testSelect', width:100,
|
||||
editable:true, edittype:'select', editoptions:{'class':'form-control',
|
||||
items: $.merge([{dictLabel:' ',dictValue:''}], ${@DictUtils.getDictListJson('sys_menu_type')}),
|
||||
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
|
||||
$(element).select2().on("change",function(){$(this).valid()});
|
||||
}
|
||||
}
|
||||
},
|
||||
// {header:'下拉多选', name:'testSelectMultiple', width:100,
|
||||
// editable:true, edittype:'select', editoptions:{multiple:true, 'class':'form-control',
|
||||
// items: $.merge([], ${@DictUtils.getDictListJson('sys_menu_type')}),
|
||||
// itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
|
||||
// $(element).select2().on("change",function(){$(this).valid()});
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
{header:'日期选择', name:'testDate', width:150,
|
||||
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},
|
||||
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true',
|
||||
dataInit: function(element){ $(element).on('focus', function(){
|
||||
WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});
|
||||
});
|
||||
}}
|
||||
},
|
||||
{header:'日期时间', name:'testDatetime', width:150,
|
||||
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},
|
||||
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true',
|
||||
dataInit: function(element){ $(element).on('focus', function(){
|
||||
WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});
|
||||
});
|
||||
}}
|
||||
},
|
||||
{header:'用户选择', name:'testUser', width:150,
|
||||
formatter: function(val, obj, row, act){
|
||||
return js.val(row, 'testUser.userCode')+'|'+js.val(row, 'testUser.userName');
|
||||
}, editable: true, edittype: "custom", editoptions: {
|
||||
custom_element: function(val, editOptions) {
|
||||
return js.template('treeselectTpl', {
|
||||
id: 'user_'+editOptions.id, title: '用户',
|
||||
name: 'testUser.userCode', value: val.split('|')[0],
|
||||
labelName: 'testUser.userName', labelValue: val.split('|')[1],
|
||||
url: '${ctx}/sys/office/treeData?isLoadUser=true', cssClass: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{header:'部门选择', name:'testOffice', width:150,
|
||||
formatter: function(val, obj, row, act){
|
||||
return js.val(row, 'testOffice.officeCode')+'|'+js.val(row, 'testOffice.officeName');
|
||||
}, editable: true, edittype: "custom", editoptions: {
|
||||
custom_element: function(val, editOptions) {
|
||||
return js.template('treeselectTpl', {
|
||||
id: 'office_'+editOptions.id, title: '部门',
|
||||
name: 'testOffice.officeCode', value: val.split('|')[0],
|
||||
labelName: 'testOffice.officeName', labelValue: val.split('|')[1],
|
||||
url: '${ctx}/sys/office/treeData?officeTypes=1,2', cssClass: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{header:'区域选择', name:'testAreaCode', width:150,
|
||||
formatter: function(val, obj, row, act){
|
||||
return js.val(row, 'testAreaCode')+'|'+js.val(row, 'testAreaName');
|
||||
}, editable: true, edittype: "custom", editoptions: {
|
||||
custom_element: function(val, editOptions) {
|
||||
return js.template('treeselectTpl', {
|
||||
id: 'area_'+editOptions.id, title: '区域',
|
||||
name: 'testAreaCode', value: val.split('|')[0],
|
||||
labelName: 'testAreaName', labelValue: val.split('|')[1],
|
||||
url: '${ctx}/sys/area/treeData', cssClass: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{header:'操作', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
|
||||
var actions = [];
|
||||
if (val == 'new'){
|
||||
actions.push('<a href="#" onclick="js.confirm(\'你确认要删除这条数据吗？\', function(){$(\'#dataGrid\').dataGrid(\'delRowData\',\''+obj.rowId+'\')});return false;"><i class="fa fa-trash-o"></i></a> ');
|
||||
}else{
|
||||
actions.push('<a href="#" onclick="js.confirm(\'你确认要删除这条数据吗？\', function(){$(\'#dataGrid\').dataGrid(\'setRowData\',\''+obj.rowId+'\',null,{display:\'none\'})});$(\'#'+obj.rowId+'_status\').val(\''+Global.STATUS_DELETE+'\');return false;"><i class="fa fa-trash-o"></i></a> ');
|
||||
}
|
||||
return actions.join('');
|
||||
}, editoptions: {defaultValue: 'new'}}
|
||||
],
|
||||
|
||||
// 编辑表格参数
|
||||
editGrid: true, // 是否是编辑表格
|
||||
editGridInitRowNum: 1, // 编辑表格的初始化新增行数
|
||||
editGridAddRowBtn: $('#dataGridAddRowBtn'), // 子表增行按钮
|
||||
editGridAddRowInitData: {id: '', status: Global.STATUS_NORMAL}, // 新增行的时候初始化的数据
|
||||
|
||||
// 编辑表格的提交数据参数
|
||||
editGridInputFormListName: 'testDataChildList', // 提交的数据列表名
|
||||
editGridInputFormListAttrs: 'status,id,testSort,testData.id,testInput,testTextarea,testSelect,testSelectMultiple,testRadio,testCheckbox,testDate,testDatetime,testUser.userCode,testOffice.officeCode,testAreaCode,testAreaName,', // 提交数据列表的属性字段
|
||||
|
||||
// 加载成功后执行事件
|
||||
ajaxSuccess: function(data){
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script id="treeselectTpl" type="text/template">//<!--<div>
|
||||
<#form:treeselect id="{{d.id}}" title="{{d.title}}" name="{{d.name}}" value="{{d.value}}"
|
||||
labelName="{{d.labelName}}" labelValue="{{d.labelValue}}" url="{{d.url}}"
|
||||
class="{{d.cssClass}}" btnClass="btn-sm" allowClear="true"/>
|
||||
</div>//--></script>
|
||||
230
web/src/main/resources/views/modules/demo/dataGridGroupGrid.html
Normal file
230
web/src/main/resources/views/modules/demo/dataGridGroupGrid.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<% layout('/layouts/default.html', {title: '数据管理', libs: ['dataGrid']}){ %>
|
||||
<div class="main-content">
|
||||
<div class="box box-main">
|
||||
<div class="box-header">
|
||||
<div class="box-title">
|
||||
<i class="fa fa-list-alt"></i> 数据管理
|
||||
</div>
|
||||
<div class="box-tools pull-right">
|
||||
<a href="#" class="btn btn-default" id="btnSearch" title="查询"><i class="fa fa-filter"></i> 查询</a>
|
||||
<% if(hasPermi('test:testData:edit')){ %>
|
||||
<a href="${ctx}/test/testData/form" class="btn btn-default btnTool" title="新增数据"><i class="fa fa-plus"></i> 新增</a>
|
||||
<% } %>
|
||||
</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 Wdate-date"
|
||||
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,onpicked:function(){testDate_lte.click()}});"/>
|
||||
--
|
||||
<#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control Wdate-date"
|
||||
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
|
||||
</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 Wdate-datetime"
|
||||
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,onpicked:function(){testDatetime_lte.click()}});"/>
|
||||
--
|
||||
<#form:input path="testDatetime_lte" readonly="true" maxlength="20" class="form-control Wdate-datetime"
|
||||
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
|
||||
</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"/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<script>
|
||||
// 初始化DataGrid对象
|
||||
$('#dataGrid').dataGrid({
|
||||
searchForm: $("#searchForm"),
|
||||
columnModel: [
|
||||
{header:'单行文本', name:'testInput', index:'a.test_input', width:150, align:"center", frozen:true, formatter: function(val, obj, row, act){
|
||||
if(obj.rowId == ''){ return '小计:'; }
|
||||
return '<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" data-title="编辑数据">'+(val||row.id)+'</a>';
|
||||
}, summaryTpl: "<em>{0}</em> ", summaryType: "count"},
|
||||
{header:'多行文本', name:'testTextarea', index:'a.test_textarea', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
if(obj.rowId == ''){ return '<em>' + val + '</em>个' }
|
||||
return val;
|
||||
}, summaryTpl: "<em>{0}</em>", summaryType: "count"},
|
||||
{header:'金额', name:'id', index:'a.id', width:150, align:"right", formatter: function(val, obj, row, act){
|
||||
val = js.formatMoney(val/(1000*1000*1000*1000));
|
||||
if(obj.rowId == ''){ return (val != '') ? ('￥' + val) : ''; }
|
||||
return val;
|
||||
}, summaryTpl: "<em>{0}</em> ", summaryType: "sum"},
|
||||
{header:'下拉框', name:'testSelect', index:'a.test_select', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
return js.getDictLabel(${@DictUtils.getDictListJson('sys_menu_type')}, val, '未知', true);
|
||||
}},
|
||||
{header:'下拉多选', name:'testSelectMultiple', index:'a.test_select_multiple', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
return js.getDictLabel(${@DictUtils.getDictListJson('sys_menu_type')}, val, '未知', true);
|
||||
}},
|
||||
{header:'单选框', name:'testRadio', index:'a.test_radio', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
return js.getDictLabel(${@DictUtils.getDictListJson('sys_menu_type')}, val, '未知', true);
|
||||
}},
|
||||
{header:'复选框', name:'testCheckbox', index:'a.test_checkbox', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
return js.getDictLabel(${@DictUtils.getDictListJson('sys_menu_type')}, val, '未知', true);
|
||||
}},
|
||||
{header:'日期选择', name:'testDate', index:'a.test_date', width:150, align:"center"},
|
||||
{header:'日期时间', name:'testDatetime', index:'a.test_datetime', width:150, align:"center"},
|
||||
{header:'用户选择', name:'testUser.userName', index:'a.test_user_code', width:150, align:"center"},
|
||||
{header:'部门选择', name:'testOffice.officeName', index:'a.test_office_code', width:150, align:"center"},
|
||||
{header:'区域选择', name:'testAreaName', index:'a.test_area_code', width:150, align:"center"},
|
||||
{header:'区域名称', name:'testAreaName', index:'a.test_area_name', width:150, align:"left"},
|
||||
{header:'状态', name:'status', index:'a.status', width:150, align:"center", formatter: function(val, obj, row, act){
|
||||
return js.getDictLabel(${@DictUtils.getDictListJson('sys_search_status')}, val, '未知', true);
|
||||
}},
|
||||
{header:'创建时间', name:'createDate', index:'a.create_date', width:150, align:"center"},
|
||||
{header:'备注信息', name:'remarks', index:'a.remarks', width:150, align:"left"},
|
||||
{header:'操作', name:'actions', width:120, sortable:false, title:false, formatter: function(val, obj, row, act){
|
||||
var actions = [];
|
||||
<% if(hasPermi('test:testData:edit')){ %>
|
||||
actions.push('<a href="${ctx}/test/testData/form?id='+row.id+'" class="btnList" title="编辑数据"><i class="fa fa-pencil"></i></a> ');
|
||||
if (row.status == Global.STATUS_NORMAL){
|
||||
actions.push('<a href="${ctx}/test/testData/disable?id='+row.id+'" class="btnList" title="停用数据" data-confirm="确认要停用该数据吗？"><i class="glyphicon glyphicon-ban-circle"></i></a> ');
|
||||
}
|
||||
if (row.status == Global.STATUS_DISABLE){
|
||||
actions.push('<a href="${ctx}/test/testData/enable?id='+row.id+'" class="btnList" title="启用数据" data-confirm="确认要启用该数据吗？"><i class="glyphicon glyphicon-ok-circle"></i></a> ');
|
||||
}
|
||||
actions.push('<a href="${ctx}/test/testData/delete?id='+row.id+'" class="btnList" title="删除数据" data-confirm="确认要删除该数据吗？"><i class="fa fa-trash-o"></i></a> ');
|
||||
<% } %>
|
||||
return actions.join('');
|
||||
}}
|
||||
],
|
||||
|
||||
frozenCols: true, // 启用冻结列，并在colModel中设置frozen:true
|
||||
showRownum: true, // 是否显示行号，默认true
|
||||
showFooter: true, // 是否显示底部合计行，数据载入详见 ajaxSuccess
|
||||
|
||||
// ================ 设置多级表头 BEGIN ==============
|
||||
// 设置多级表头
|
||||
groupHeaders: {
|
||||
twoLevel:[
|
||||
{startColumnName: 'testSelect', numberOfColumns: 2, titleText: '二级表头'},
|
||||
{startColumnName: 'testRadio', numberOfColumns:2, titleText:'二级表头2'}
|
||||
],
|
||||
threeLevel:[
|
||||
{startColumnName: 'testSelect', numberOfColumns:4, titleText:'三级表头'}
|
||||
]
|
||||
},
|
||||
// ================ 设置多级表头 END ==============
|
||||
|
||||
// ================ 分组，小计 BEGIN ==============
|
||||
grouping: true, // 是否分组显示
|
||||
groupingView: {
|
||||
groupField: ["status"], // 需要分组的列
|
||||
groupColumnShow: [false],// 是否显示分组的列
|
||||
groupText: ["<b>{0}</b>"], // 设置组标题，加粗标题：["<b>{0}</b>"]，不显示标题：["none"]
|
||||
groupSummary: [true], // 是否显示[小计]列，数据载入详见 columnModel.formatter
|
||||
groupCollapse: false // false为默认展开，true默认为折叠
|
||||
},
|
||||
// ================ 分组，小计 END ==============
|
||||
|
||||
// 加载成功后执行事件
|
||||
ajaxSuccess: function(data){
|
||||
|
||||
// ================ 启用合计行 BEGIN ==============
|
||||
// showFooter: true, // 是否显示底部合计行
|
||||
// 第 1 种方法：请求完成之后通过js设置，举例如下：
|
||||
// 设置底部合计行数据（设置合计行）
|
||||
$('#dataGrid').dataGrid("footerData", "set", {
|
||||
"testInput" : "<center><em>合计：</em></center>",
|
||||
"testTextarea" : "<em>" + data.count + "</em>个",
|
||||
"id": "<em>￥900,000,000.00 </em>"
|
||||
}, false);
|
||||
// 第 2 种方法：在返回结果集中设置 otherData属性，举例格式如下：
|
||||
/* {"pageNo":1, "pageSize":30, "list":[返回结果集数据],
|
||||
"otherData":{
|
||||
"testInput" : "<center><em>合计：</em></center>",
|
||||
"testTextarea" : "<em>" + data.count + "</em>个",
|
||||
"id": "<em>￥900,000,000.00 </em>"
|
||||
}
|
||||
} */
|
||||
// ================ 启用合计行 END ================
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user