完善示例

This commit is contained in:
thinkgem
2021-04-14 19:48:57 +08:00
parent 4e16ddc6b1
commit 3a770f2818
4 changed files with 225 additions and 1 deletions

View File

@@ -10,6 +10,7 @@
<% if(hasPermi('test:testData:edit')){ %>
<a href="${ctx}/test/testData/form" class="btn btn-default btnTool" title="新增数据"><i class="fa fa-plus"></i> 新增</a>
<% } %>
<a href="${ctx}/demo/dataGrid/stateGrid" class="btn btn-default btnTool" title="统计表样例"><i class="fa fa-hand-lizard-o"></i> 统计表样例</a>
</div>
</div>
<div class="box-body">
@@ -174,6 +175,7 @@ $('#dataGrid').dataGrid({
}}
],
shrinkToFit: false, // 是否按百分比自动调整列宽当列比较多时开启水平滚动可设置为false
frozenCols: true, // 启用冻结列并在colModel中设置frozen:true
showRownum: true, // 是否显示行号默认true
showFooter: true, // 是否显示底部合计行,数据载入详见 ajaxSuccess

View File

@@ -0,0 +1,149 @@
<% layout('/layouts/default.html', {title: '统计表样例', libs: ['dataGrid']}){ %>
<style>
.ui-jqgrid tr.jqgrow td {
padding: 0 !important;
}
.ui-jqgrid .sum-child{
width: 100%;
height: 100%;
line-height: 35px;
background-color: #f0f0f0;
}
.ui-jqgrid .sum-parent {
background-color: #65a1db;
color: white;
}
</style>
<div class="main-content">
<div class="box box-main">
<div class="box-header">
<div class="box-title">
<i class="fa fa-list-alt"></i> ${text('统计表样例')}
</div>
<div class="box-tools pull-right">
<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
<a href="${ctx}/psi/wechatUser/form" class="btn btn-default btnTool" title="${text('新增微信用户表')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
</div>
</div>
<div class="box-body">
<#form:form id="searchForm" class="form-inline hide" >
<div class="form-group">
<label class="control-label">${text('时间')}</label>
<div class="control-inline width-150">
<#form:input path="dateStart" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="date" />
&nbsp;--&nbsp;
<#form:input path="dateEnd" readonly="true" maxlength="20" class="form-control laydate width-datetime"
dataFormat="date" />
</div>
</div>
<div class="form-group">
<label class="control-label">区域选择:</label>
<div class="control-inline width-120" >
<#form:treeselect id="areaId" title="区域选择"
path="areaId" canSelectParent="true" canSelectRoot="true"
url="${ctx}/sys/area/treeData?parentCode=0" allowClear="true"/>
</div>
</div>
<div class="form-group">
<button type="button" id="search" class="btn btn-primary btn-sm">${text('查询')}</button>
<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
</div>
</#form:form>
<table id="dataGrid"></table>
</div>
</div>
</div>
<% } %>
<script>
var dataGridData = {
data: [
{name:"客户1-1-1",quantity:1,amount:0,return:0,virtual:0,balance:0,parentArea:'营销1部',childArea:'省区1-1'},
{name:"客户1-1-2",quantity:0,amount:2,return:0,virtual:0,balance:0,parentArea:'营销1部',childArea:'省区1-1'},
{name:"片区合计",quantity:1,amount:2,return:0,virtual:0,balance:0,sumSet:'child',parentArea:'营销1部',childArea:'片区合计'},
{name:"大区合计",quantity:1,amount:2,return:0,virtual:0,balance:0,sumSet:'parent',parentArea:'大区合计',childArea:'大区合计'},
{name:"客户2-1-1",quantity:0,amount:0,return:0,virtual:0,balance:0,parentArea:'营销2部',childArea:'省区2-1'},
{name:"客户2-1-2",quantity:0,amount:0,return:3,virtual:0,balance:0,parentArea:'营销2部',childArea:'省区2-1'},
{name:"片区合计",quantity:0,amount:0,return:3,virtual:4,balance:0,sumSet:'child',parentArea:'营销2部',childArea:'片区合计'},
{name:"客户2-2-1",quantity:0,amount:0,return:0,virtual:0,balance:0,parentArea:'营销2部',childArea:'省区2-2'},
{name:"客户2-2-2",quantity:0,amount:0,return:0,virtual:0,balance:5,parentArea:'营销2部',childArea:'省区2-2'},
{name:"片区合计",quantity:0,amount:0,return:0,virtual:0,balance:5,sumSet:'child',parentArea:'营销2部',childArea:'片区合计'},
{name:"大区合计",quantity:0,amount:0,return:3,virtual:4,balance:5,sumSet:'parent',parentArea:'大区合计',childArea:'大区合计'}
], sum: {quantity:1,amount:2,return:3,virtual:4,balance:5}
}
function formatter(val, obj, row, act) {
if (row.sumSet === 'child') {
return '<div class="sum-child">' + val + '</div>'
} else if (row.sumSet === 'parent') {
return '<div class="sum-child sum-parent">' + val + '</div>'
} else {
return val
}
}
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
data: dataGridData.data,
datatype: "local", // 设置本地数据
columnModel: [
{
header: '大区', name: 'parentArea', align: 'center', width: 150, sortable: false, formatter: formatter,
cellattr: function (rowId, tv, row, cm, val) {
if (row.sumSet === 'parent') {
return ' colspan=3'
}
}
},
{
header: '片区', name: 'childArea', align: 'center', width: 150, sortable: false, formatter: formatter,
cellattr: function (rowId, tv, row, cm, val) {
if (row.sumSet === 'parent') {
return ' style="display:none;'
}
if (row.sumSet === 'child') {
return ' colspan=2'
}
}
},
{
header: '客户', name: 'name', align: 'center', width: 150, sortable: false, formatter: formatter,
cellattr: function (rowId, tv, row, cm, val) {
if (row.sumSet === 'parent' || row.sumSet === 'child') {
return ' style="display:none;'
}
}
},
{header: '数量', name: 'quantity', align: 'center', width: 150, sortable: false, formatter: formatter},
{header: '金额', name: 'amount', align: 'center', width: 150, sortable: false, formatter: formatter},
{header: '总回款', name: 'return', align: 'center', width: 150, sortable: false, formatter: formatter},
{header: '虚拟货款', name: 'virtual', align: 'center', width: 150, sortable: false, formatter: formatter},
{header: '最新余额', name: 'balance', align: 'center', width: 150, sortable: false, formatter: formatter}
],
altRows: false,
groupHeaders: {
threeLevel: [
{startColumnName: 'parentArea', numberOfColumns: 8, titleText: '时间'}
],
twoLevel: [
{startColumnName: 'quantity', numberOfColumns: 2, titleText: '发货', width: 150},
{startColumnName: 'return', numberOfColumns: 2, titleText: '回款', width: 150}
]
},
showRownum: true, // 是否显示行号默认true
showFooter: true, // 是否显示底部合计行,数据载入详见 ajaxSuccess
// 加载成功后执行事件
ajaxSuccess: function (data) {
$('#dataGrid').dataGrid('mergeCell', 'parentArea,childArea');
$('#dataGrid').dataGrid("footerData", "set", {
"parentArea": "<center><em>合计:</em></center>",
"quantity": "<em>" + dataGridData.sum.quantity + "</em>",
"amount": "<em>" + dataGridData.sum.amount + "</em>",
"return": "<em>" + dataGridData.sum.return + "</em>",
"virtual": "<em>" + dataGridData.sum.virtual + "</em>",
"balance": "<em>" + dataGridData.sum.balance + "</em>",
}, false);
}
});
</script>

View File

@@ -285,7 +285,14 @@ $("#testDataChildDataGrid").dataGrid({
columnModel: [
{header:'状态', name:'status', editable:true, hidden:true},
{header:'主键', name:'id', editable:true, hidden:true},
{header:'排序号', name:'testSort', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'11', 'class':'form-control digits'}},
{header:'排序号', name:'testSort', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'11', 'class':'form-control digits',
// 'data-inputmask-alias':"money", 'data-inputmask': "'digits':'2'",
dataInit: function(element){
// $(element).addClass('inputmask').attr('data-inputmask-alias', "money").attr('data-inputmask', "'digits':'2'").inputmask()
$(element).addClass('inputmask').attr({'data-inputmask-alias': "money", 'data-inputmask': "'digits':'2'"}).inputmask()
// $(element).inputmask();
}
}},
{header:'父表主键', name:'testData.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'}},

View File

@@ -0,0 +1,66 @@
<% layout('/layouts/default.html', {title: '文书内容', libs: ['validate','dataGrid','fileupload']}){ %>
<div class="main-content">
<div class="box box-main">
<button type="button" class="btn btn-sm btn-primary" onclick="openEdit(1)" id="submitBtn"><i class="fa fa-arrow-right"></i> ${text('时间弹窗')}</button>
</div>
</div>
<% } %>
<script>
function openEdit(docId){
js.layer.open({
type: 1,
area: ['400px'],
title: '${text("审核审批时间修改")}',
resize: false,
scrollbar: true,
content: js.template('importTpl'),
success: function(layero, index){
layero.find('.laydate').on('click', function(e){
var id = $(this).attr('id');
top.laydate.render({
elem: '#'+id, show: true, closeStop: '#'+id
});
});
},
btn: ['<i class="fa fa-check"></i> ${text("确认")}',
'<i class="fa fa-remove"></i> ${text("关闭")}'],
btn1: function(index, layero){
var form = {
inputForm: layero.find('#inputDateForm'),
shDate: layero.find('#shDate').val(),
spDate: layero.find('#spDate').val()
};
if (docId == '' || form.shDate == '' ||form.spDate == ''){
js.showMessage("${text('请确认需要修改的内容')}", null, 'warning');
return false;
}
return true;
}
});
}
</script>
<script id="importTpl" type="text/template">//<!--
<form id="inputDateForm" action="${ctx}/doc/base/docBase/updateDate" method="post" enctype="multipart/form-data"
class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required">*</span> ${text('审核时间')}<i class="fa icon-question hide"></i>
</label>
<div class="col-sm-8">
<#form:input name="shDate" dataFormat="yyyy-MM-dd" readonly="true" maxlength="20" class="form-control laydate width-250"
data-type="date" lay-key="1"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required">*</span> ${text('审批时间')}<i class="fa icon-question hide"></i>
</label>
<div class="col-sm-8">
<#form:input name="spDate" dataFormat="yyyy-MM-dd" readonly="true" maxlength="20" class="form-control laydate width-250"
data-type="date" lay-key="2"/>
</div>
</div>
</div>
</form>
//--></script>