manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增可编辑数据表格的JSON数据获取实例。

Browse Source
This commit is contained in:
thinkgem
2019-12-22 11:28:00 +08:00
parent b22e23bcc5
commit 0895f1015a
1 changed files with 118 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
web/src/main/resources/views/modules/demo/demoDataGridEditGrid.html
View File

@@ -7,110 +7,109 @@
</div> </div>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<a href="#" class="btn btn-default" id="btnSearch" title="查询"><i class="fa fa-filter"></i> 查询</a> <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>
<a href="#" id="dataGridAddRowBtn" class="btn btn-default"><i class="fa fa-plus"></i> 增行</a> <a href="#" id="btnGetData" class="btn btn-default"><i class="fa fa-hand-lizard-o"></i> 获取表格数据</a>
<% } %>
</div> </div>
</div> </div>
<div class="box-body"> <div class="box-body">
<#form:form id="searchForm" model="${testData}" action="${ctx}/test/testData/listData" method="post" class="form-inline hide" <#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}"> data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group"> <div class="form-group">
<label class="control-label">单行文本：</label> <label class="control-label">单行文本：</label>
<div class="control-inline"> <div class="control-inline">
<#form:input path="testInput" maxlength="200" class="form-control width-120"/> <#form:input path="testInput" maxlength="200" class="form-control width-120"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">多行文本：</label> <label class="control-label">多行文本：</label>
<div class="control-inline"> <div class="control-inline">
<#form:input path="testTextarea" maxlength="200" class="form-control width-120"/> <#form:input path="testTextarea" maxlength="200" class="form-control width-120"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">下拉框：</label> <label class="control-label">下拉框：</label>
<div class="control-inline width-120"> <div class="control-inline width-120">
<#form:select path="testSelect" dictType="sys_menu_type" blankOption="true" class="form-control"/> <#form:select path="testSelect" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">下拉多选：</label> <label class="control-label">下拉多选：</label>
<div class="control-inline width-120"> <div class="control-inline width-120">
<#form:select path="testSelectMultiple" dictType="sys_menu_type" multiple="true" blankOption="true" class="form-control"/> <#form:select path="testSelectMultiple" dictType="sys_menu_type" multiple="true" blankOption="true" class="form-control"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">单选框：</label> <label class="control-label">单选框：</label>
<div class="control-inline"> <div class="control-inline">
<#form:radio path="testRadio" dictType="sys_menu_type" blankOption="true" class="form-control"/> <#form:radio path="testRadio" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">复选框：</label> <label class="control-label">复选框：</label>
<div class="control-inline"> <div class="control-inline">
<#form:checkbox path="testCheckbox" dictType="sys_menu_type" blankOption="true" class="form-control"/> <#form:checkbox path="testCheckbox" dictType="sys_menu_type" blankOption="true" class="form-control"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">日期选择：</label> <label class="control-label">日期选择：</label>
<div class="control-inline"> <div class="control-inline">
<#form:input path="testDate_gte" readonly="true" maxlength="20" class="form-control Wdate-date" <#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()}});"/> dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,onpicked:function(){testDate_lte.click()}});"/>
&nbsp;--&nbsp; &nbsp;--&nbsp;
<#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control Wdate-date" <#form:input path="testDate_lte" readonly="true" maxlength="20" class="form-control Wdate-date"
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/> dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">日期时间：</label> <label class="control-label">日期时间：</label>
<div class="control-inline"> <div class="control-inline">
<#form:input path="testDatetime_gte" readonly="true" maxlength="20" class="form-control Wdate-datetime" <#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()}});"/> dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,onpicked:function(){testDatetime_lte.click()}});"/>
&nbsp;--&nbsp; &nbsp;--&nbsp;
<#form:input path="testDatetime_lte" readonly="true" maxlength="20" class="form-control Wdate-datetime" <#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});"/> dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">用户选择：</label> <label class="control-label">用户选择：</label>
<div class="control-inline width-120" > <div class="control-inline width-120" >
<#form:treeselect id="testUser" title="用户选择" <#form:treeselect id="testUser" title="用户选择"
path="testUser.userCode" labelPath="testUser.userName" path="testUser.userCode" labelPath="testUser.userName"
url="${ctx}/sys/office/treeData?isLoadUser=true" allowClear="true"/> url="${ctx}/sys/office/treeData?isLoadUser=true" allowClear="true"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">机构选择：</label> <label class="control-label">机构选择：</label>
<div class="control-inline width-120" > <div class="control-inline width-120" >
<#form:treeselect id="testOffice" title="机构选择" <#form:treeselect id="testOffice" title="机构选择"
path="testOffice.officeCode" labelPath="testOffice.officeName" path="testOffice.officeCode" labelPath="testOffice.officeName"
url="${ctx}/sys/office/treeData" allowClear="true"/> url="${ctx}/sys/office/treeData" allowClear="true"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">区域选择：</label> <label class="control-label">区域选择：</label>
<div class="control-inline width-120" > <div class="control-inline width-120" >
<#form:treeselect id="testAreaCode" title="区域选择" <#form:treeselect id="testAreaCode" title="区域选择"
path="testAreaCode" labelPath="testAreaName" path="testAreaCode" labelPath="testAreaName"
url="${ctx}/sys/area/treeData" allowClear="true"/> url="${ctx}/sys/area/treeData" allowClear="true"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">状态：</label> <label class="control-label">状态：</label>
<div class="control-inline width-120"> <div class="control-inline width-120">
<#form:select path="status" dictType="sys_search_status" blankOption="true" class="form-control isQuick"/> <#form:select path="status" dictType="sys_search_status" blankOption="true" class="form-control isQuick"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label">备注信息：</label> <label class="control-label">备注信息：</label>
<div class="control-inline"> <div class="control-inline">
<#form:input path="remarks" maxlength="500" class="form-control width-120"/> <#form:input path="remarks" maxlength="500" class="form-control width-120"/>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<button type="submit" class="btn btn-primary btn-sm">查询</button> <button type="submit" class="btn btn-primary btn-sm">查询</button>
<button type="reset" class="btn btn-default btn-sm">重置</button> <button type="reset" class="btn btn-default btn-sm">重置</button>
</div> </div>
</#form:form> </#form:form>
<#form:form id="inputForm" model="${testData}" action="${ctx}/test/testData/save" method="post" class="form-horizontal"> <#form:form id="inputForm" model="${testData}" action="${ctx}/test/testData/save" method="post" class="form-horizontal">
<table id="dataGrid"></table> <table id="dataGrid"></table>
@@ -126,17 +125,17 @@ $('#dataGrid').dataGrid({
searchForm: $("#searchForm"), searchForm: $("#searchForm"),
// 设置数据表格列 // 设置数据表格列
columnModel: [ columnModel: [
{header:'状态', name:'status', editable:true, hidden:true}, {header:'状态', name:'status', editable:true, hidden:true, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}},
{header:'主键', name:'id', editable:true, hidden:true}, {header:'主键', name:'id', editable:true, hidden:true, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}},
{header:'单行文本', name:'testInput', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'200', 'class':'form-control'}}, {header:'单行文本', name:'testInput', width:150, editable:true, edittype:'text', editoptions:{'maxlength':'200', 'class':'form-control'}, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}},
{header:'多行文本', name:'testTextarea', width:150, editable:true, edittype:'textarea', editoptions:{'maxlength':'200', 'class':'form-control', 'rows':'1'}}, {header:'多行文本', name:'testTextarea', width:150, editable:true, edittype:'textarea', editoptions:{'maxlength':'200', 'class':'form-control', 'rows':'1'}, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}},
{header:'下拉框', name:'testSelect', width:100, {header:'下拉框', name:'testSelect', width:100,
editable:true, edittype:'select', editoptions:{'class':'form-control', editable:true, edittype:'select', editoptions:{'class':'form-control',
items: $.merge([{dictLabel:'&nbsp;',dictValue:''}], ${@DictUtils.getDictListJson('sys_menu_type')}), items: $.merge([{dictLabel:'&nbsp;',dictValue:''}], ${@DictUtils.getDictListJson('sys_menu_type')}),
itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){ itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
$(element).select2().on("change",function(){$(this).resetValid()}); $(element).select2().on("change",function(){$(this).resetValid()});
} }
} }, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}
}, },
// {header:'下拉多选', name:'testSelectMultiple', width:100, // {header:'下拉多选', name:'testSelectMultiple', width:100,
// editable:true, edittype:'select', editoptions:{multiple:true, 'class':'form-control', // editable:true, edittype:'select', editoptions:{multiple:true, 'class':'form-control',
@@ -144,7 +143,7 @@ $('#dataGrid').dataGrid({
// itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){ // itemLabel: 'dictLabel', itemValue: 'dictValue', dataInit: function(element){
// $(element).select2().on("change",function(){$(this).resetValid()}); // $(element).select2().on("change",function(){$(this).resetValid()});
// } // }
// } // }, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}
// }, // },
{header:'日期选择', name:'testDate', width:150, {header:'日期选择', name:'testDate', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},
@@ -152,7 +151,7 @@ $('#dataGrid').dataGrid({
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});
}); });
}} }}, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}
}, },
{header:'日期时间', name:'testDatetime', width:150, {header:'日期时间', name:'testDatetime', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},
@@ -160,7 +159,7 @@ $('#dataGrid').dataGrid({
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});
}); });
}} }}, unformat: function(val, obj, cell){return $('#'+obj.rowId+'_'+obj.colModel.name, cell).val();}
}, },
{header:'用户选择', name:'testUser', width:150, {header:'用户选择', name:'testUser', width:150,
formatter: function(val, obj, row, act){ formatter: function(val, obj, row, act){
@@ -174,7 +173,7 @@ $('#dataGrid').dataGrid({
url: '${ctx}/sys/office/treeData?isLoadUser=true', cssClass: '' url: '${ctx}/sys/office/treeData?isLoadUser=true', cssClass: ''
}); });
} }
} }, unformat: function(val, obj, cell){return $('#user_'+obj.rowId+'_'+obj.colModel.name+'Code', cell).val();}
}, },
{header:'机构选择', name:'testOffice', width:150, {header:'机构选择', name:'testOffice', width:150,
formatter: function(val, obj, row, act){ formatter: function(val, obj, row, act){
@@ -188,7 +187,7 @@ $('#dataGrid').dataGrid({
url: '${ctx}/sys/office/treeData?officeTypes=1,2', cssClass: '' url: '${ctx}/sys/office/treeData?officeTypes=1,2', cssClass: ''
}); });
} }
} }, unformat: function(val, obj, cell){return $('#office_'+obj.rowId+'_'+obj.colModel.name+'Code', cell).val();}
}, },
{header:'区域选择', name:'testAreaCode', width:150, {header:'区域选择', name:'testAreaCode', width:150,
formatter: function(val, obj, row, act){ formatter: function(val, obj, row, act){
@@ -202,7 +201,7 @@ $('#dataGrid').dataGrid({
url: '${ctx}/sys/area/treeData', cssClass: '' url: '${ctx}/sys/area/treeData', cssClass: ''
}); });
} }
} }, unformat: function(val, obj, cell){return $('#area_'+obj.rowId+'_'+obj.colModel.name+'Code', cell).val();}
}, },
{header:'列表选择', name:'testListSelect', width:150, {header:'列表选择', name:'testListSelect', width:150,
formatter: function(val, obj, row, act){ formatter: function(val, obj, row, act){
@@ -218,7 +217,7 @@ $('#dataGrid').dataGrid({
cssClass: '' cssClass: ''
}); });
} }
} }, unformat: function(val, obj, cell){return $('#user_'+obj.rowId+'_'+obj.colModel.name+'Code', cell).val();}
}, },
{header:'操作', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){ {header:'操作', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
var actions = []; var actions = [];
@@ -228,7 +227,7 @@ $('#dataGrid').dataGrid({
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>&nbsp;'); 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>&nbsp;');
} }
return actions.join(''); return actions.join('');
}, editoptions: {defaultValue: 'new'}} }, editoptions: {defaultValue: 'new'}, unformat: function(val, obj, cell){return '';}}
], ],
// 编辑表格参数 // 编辑表格参数
@@ -246,6 +245,11 @@ $('#dataGrid').dataGrid({
} }
}); });
$('#btnGetData').click(function(){
var data = $('#dataGrid').dataGrid('getRowData');
log(data)
js.showMessage('请按 F12 打开控制台，查看数据');
});
</script> </script>
<script id="treeselectTpl" type="text/template">//<!--<div> <script id="treeselectTpl" type="text/template">//<!--<div>
<#form:treeselect id="{{d.id}}" title="{{d.title}}" name="{{d.name}}" value="{{d.value}}" <#form:treeselect id="{{d.id}}" title="{{d.title}}" name="{{d.name}}" value="{{d.value}}"