完善示例
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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" />
|
||||
--
|
||||
<#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>
|
||||
@@ -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'}},
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user