html
<#include "/common/layout.html">
<@layout title="" scripts=["/assets/js/common/gridHelper.js","/assets/wisdom/paymentDetail/js/paymentDetail.js","/assets/js/common/formaterHelp.js"] styles=[] >
<div class="easyui-layout" data-options="border:false,fit:true">
<div data-options="region:'north',border:false" style="overflow:hidden;padding:10px;">
<label style="color: red;font-weight: bold"> ${(weixinAccount.accountName)! }</label>
<br><br>
<div class="easyui-panel" title="re" style="1050px;height:500px;overflow: hidden;" >
<input type="hidden" id="reportType" name="wxSchoolWisdomPaymentDetail.reportType" />
<input type="hidden" id="accountId" name="wxSchoolWisdomPaymentProject.accountId" value="${(weixinAccount.id)! }" />
<input type="hidden" id="ids" name="wxSchoolWisdomPaymentDetail.ids" />
<div class="easyui-panel" style="padding:5px; 100%;height: 50px;font-size: 16px;">
<div style="float: left;">
<input type="radio" name="adminFlag" value="0" onclick="rmtManager.grade()">按年级</input>
<input type="radio" name="adminFlag" value="1" onclick="rmtManager.ofclass()">按班级</input>
<input type="radio" name="adminFlag" value="2" onclick="rmtManager.person()">按个人</input>
</div>
<div style="float: right;">
<input type="button" class="easyui-linkbutton" value="保存" onclick="updateDatagrid(this)"/>
</div>
<body>
<div class="panel easyui-fluid" style="display: block; 30%;height:800px;float: left;border:1px solid #969696">
<table id="dg" class="easyui-datagrid" title="缴费范围">
</table>
</div>
<div style="float:right;69%;height:400px;margin-bottom: 150px;">
<div id="ps" class="easyui-panel" title="缴费项目" style="100%;overflow:scroll;overflow-x: hidden; height: 700px;">
<table id="glGrid" style="display:none; 100%;overflow:scroll;overflow-x: hidden;" data-options="url:'${ctx}/wisdom/paymentProject/getProData.html?accountId=${(weixinAccount.id)}',fit:true,nowrap:false,rownumbers:true,pagination:true,idField:'id'">
<thead>
<tr>
<th data-options="field:'chk',checkbox:true"></th>
<th data-options="field:'projectNo',sortable:true,80,align:'center'">项目编号</th>
<th data-options="field:'projectName',sortable:true,80,align:'center'">项目名称</th>
<th data-options="field:'projectAmt',sortable:true,80,align:'center',editor:'numberbox'">缴费金额</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#glGrid').datagrid('validateRow', editIndex)){
$('#glGrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){
$('#glGrid').datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
</script>
</body>
</div>
<div id="selectProject" >
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'" style="padding:10px;">
<div id="project"style="margin-bottom:20px">
</div>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a id="select" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick=" checkboxed('check1')">确定</a>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="glPageType" value="index" />
<input type="hidden" id="ctx" value="${ctx}" />
</@layout>
js
1.使用easyUI的数据表格，实现将选中的项目添加到数据表格
function checkboxed(z) {
var objNameList = document.getElementsByClassName(z);
var me = " <tr>";
for (var i = 0; i < objNameList.length; i++) {
if (objNameList[i].checked == true) {
var value = objNameList[i].value;
var array = value.split(",");
/*
me += '<td><input style="border:none;" type="text" readonly="readonly" name="prjNo" value="'+array[0]+'"></td>';
me += '<td><input style="border:none;" type="text" readonly="readonly" name="prjName" value="'+array[1]+'"></td>';
me +='<td><input type="text" name="prjAmt" value="'+array[2]+'"></td><td> <a href="#" class="easyui-linkbutton" onclick="deleteproject(this)">删除</a>';
me +='<input type="hidden" id="'+ array[0]+'" name="projectNo" value="'+ array[0]+','+array[1]+','+array[2]+'"></td></tr>';
$('#selectProject').window('close');*/
var proNo = array[0];
var proName = array[1];
var payAmt = array[2];
$("#project1").datagrid('appendRow',{projectNo:proNo,projectName:proName,align:'center',payAmt:payAmt,delete:'<a href="#" class="easyui-linkbutton" onclick="removeit()">删除</a>'});
$('#selectProject').window('close');
}
}
$('#project1').append(me)
}
2.实现CheckBox全选、全不选
function checkAll(z) {
var all=document.getElementById('all');//获取到点击全选的那个复选框的id
var one=document.getElementsByClassName(z);;//获取到复选框的名称
if(all.checked==true){//因为获得的是数组，所以要循环 为每一个checked赋值
for(var i=0;i<one.length;i++){
one[i].checked=true;
}
}else{
for(var j=0;j<one.length;j++){
one[j].checked=false;
}
}
}
3.实现将数据表单的值转换成json传到后台并转换成实体类
function updateDatagrid(radionObj)
{ //js获取单选框的值
var obj = document.getElementsByName("adminFlag");
for(var i = 0; i < obj.length; i ++) {
if (obj[i].checked) {
var type=obj[i].value;
}
}
var accountId = $("#accountId").val();
//获取数据表单被选中的值并转换成json 格式传给后台
var rows = $('#glGrid').datagrid('getSelections');
var stu= $('#dg').datagrid('getSelections');
var entities ="" ;
var stus ="" ;
var ctx = $("#ctx").val();
// 循环 datagrid 中现有的数据，并且逐行复制给Entities ，并且转换成json格式
// 在后台反序列话成对象的对象集合。
for(i = 0;i < rows.length;i++)
{
entities = entities + JSON.stringify(rows[i]);
}
for(i = 0;i <stu.length;i++)
{
stus = stus + JSON.stringify(stu[i]);
}
$.ajax({
url: ctx+'/wisdom/paymentDetail/studentProject.html',
type: 'POST',
async: true,
dataType: 'json',
data: {'entities': entities,'stus':stus,'type':type,'accountId':accountId},
success: function (data) {
if(data.message==""){
alert("成功");
}else{
alert("失败");
return;
}
$('#glGrid').datagrid('reload');
}
});
}
对应的action如下：
String proj = request.getParameter("entities");
CharSequence s1 = "}{";
CharSequence s2 = "},{";
proj = proj.replace(s1, s2);
proj = "[" + proj.toString() + "]";
JSONArray array =JSONArray.fromObject(proj.toString());
WxSchoolWisdomPaymentProjectVO voss = new WxSchoolWisdomPaymentProjectVO();
@SuppressWarnings("unchecked")
List listDetail=(List)JSONArray.toCollection(array,voss.getClass());
List<WxSchoolWisdomPaymentProjectVO> s = listDetail;
4.ajax传值，并将后台返回数据显示到具体地方
project_add: function(){
var ctx = $("#ctx").val();
var accountId = $("#accountId").val();
$.ajax({
url: ctx + '/wisdom/paymentProject/getData.html?wxSchoolWisdomPaymentProject.accountId='+accountId,
data: JSON.stringify({'accountId': accountId}),
type: 'post',
contentType: 'application/json',
dataType: 'json',
error: function () {
rmtHelper.showMsg("查询失败！");
},
success: function (data) {
var menu = " ";
var count;
if (data) {
$.each(data, function (index, param) {
var projectNo = document.getElementById(param.projectNo);
if(projectNo){
menu += '<input type="checkbox" disabled="disabled" class="check1" name="projectNo" value="' + param.projectNo +','+ param.projectName + ','+ param.projectAmt + '" />';
menu += '' + param.projectName + '';
}
else{
menu += '<input type="checkbox"class="check1" name="projectNo" value="' + param.projectNo +','+ param.projectName + ','+ param.projectAmt + '" />';
menu += '' + param.projectName + '';
}
count++;
});
$("#project").html("<br>" + menu + "<br/>");
//id为selectProject的div写在html页面
<div id="selectProject" >
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'" style="padding:10px;">
<div id="project"style="margin-bottom:20px">
</div>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
<a id="select" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick=" checkboxed('check1')">确定</a>
</div>
</div>
</div>
</div>
$('#selectProject').window({
400,
height:250,
title:'请选择缴费项目',
minimizable:false,
maximizable:false,
collapsible:false,
modal:true
});
$('#selectProject').window('open');
}
}
});
},
}
});
5.js实现数据表格
(function($) {
var pageType= $('#glPageType').val();
var busMng = rmtCMHelper.createBusMngInst({
busMngOptions:{
ofclass: function(){
var ctx = $("#ctx").val();
var accountId = $("#accountId").val();
var url = ctx+'/wisdom/classInfo/getClassInFo.html';
$('#dg').datagrid({
url:url,
"100%",
height:"700px",
striped: true,
loadMsg: '正在加载班级的信息...',
pagination: true,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: {"accountId":accountId},
columns: [[
{ field: 'ck', checkbox: true, align: 'left', 50 },
{ field: 'id', 100, hidden: true },
{ field: 'gradeName', title: '年级名称', 80 },
{ field: 'className', title: '班级名称', 80 },
]]
});
},
}
6.js删除选定行
function deleteproject(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('project1').deleteRow(i);
}