jeecg弹窗checkbox多选,查询时旧值被清空问题
问题:使用jeecg封装好的选择联系人弹窗的操作,每次用关键字查询都会把之前选中的覆盖掉,没办法保留我之前选中的联系人,所以自己用js实现.
父页面jsp
<input id="names" name="names" type="text" maxlength="32" value="${names}" class="form-control input-sm"
placeholder="请选择成员" datatype="*" ignore="checked" readonly="readonly" />
<input id="userIds" name="userIds" type="hidden" value="${userIds}"/>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-search" id="departSearch" onclick="openUesrSelect()"
style="margin-right: 5px">选择</a>
<a href="#" class="easyui-linkbutton" plain="true" icon="icon-redo" id="departRedo" onclick="clears()">清空</a>
<div style="font-size: 14px; display: inline-block; margin-left: 30px;">已选择 <label id="numbers">0</label>人
</div>
父页面js
//人员点击事件
function openUesrSelect() {
var width = $(window).width() * 0.6;
var height = $(window).height() * 0.7;
$.dialog.setting.zIndex = getzIndex();
var valueId = $('#userIds').val();
var realNames = $('#names').val();
//打开弹窗
$.dialog({
content : 'url:famsAnounceGroupController.do?goAddUsers&userIds='+valueId+'&realNames='+realNames,
zIndex : getzIndex(),
title : '选择人员',
lock : true,
width : width,
height : height,
button : [ {
name : '<t:mutiLang langKey="common.confirm"/>', //按钮名称
callback : callbackDepartmentSelect, //确定后的回调
focus : true
}, {
name : '<t:mutiLang langKey="common.cancel"/>',
callback : function() {
}
} ],
opacity : 0.4
}).zindex()
}
function callbackDepartmentSelect() {
var iframe = this.iframe.contentWindow; //拿到当前子窗口
//拿到子弹窗的数组(子弹窗若有选中人员就有数据)
var idsArr = iframe.idArr;
var realNamesArr = iframe.realNameArr;
//用于提交表单
$('#userIds').val(idsArr.join(','));
//确定后显示在输入框上
$('#names').val(realNamesArr.join(','));
$('#numbers').text(idsArr.length);
}
function clears() { //清空按钮
$('#names').val('');
$('#numbers').text(0);
$('#userIds').val(''); //清空已选择的id
}
子弹窗jsp
<div id="main_depart_list" class="easyui-layout" fit="true">
<div region="center" style="padding:0px;border:0px;">
<t:datagrid name="noCurDepartUserList" title="common.operation"
actionUrl="userController.do?customDatagrid" fit="true" fitColumns="true"
idField="id" checkbox="true" queryMode="group" pagination="false"
onLoadSuccess="initCheck">
<t:dgCol title="编号" field="id" hidden="true"></t:dgCol>
<t:dgCol title="用户账号" sortable="false" field="userName" query="true"></t:dgCol>
<t:dgCol title="用户名称" field="realName" query="true"></t:dgCol>
<t:dgCol title="组织机构" field="userOrgList.tsDepart.departname" query="true"></t:dgCol>
</t:datagrid>
</div>
</div>
子页面js
<script>
var ids = "${userIds}"; //后台返回的已选中的id和名字
var realNames = "${realNames}";
var idArr=[],realNameArr=[];
if (ids != '') {
idArr = ids.split(","); //根据返回的字符串从逗号截取并组成数组
realNameArr = realNames.split(",");
}
$(function () {
changeCheckbox(); //调用
})
//列表加载完成后记录选中的
function initCheck(data){
for(var i=0;i<idArr.length;i++){
if(idArr[i]!=""){
$("#noCurDepartUserList").datagrid("selectRecord",idArr[i]);
}
}
//禁用点击行(由于easyui的原因导致checkbox监听在点击行的时候失效,固先禁掉点击行时选中checkbox事件)
$('.datagrid-view2 tr').on('click',function () {
return false
})
}
//监听checkbox复选框
function changeCheckbox() {
$('#main_depart_list').on('change','input[type="checkbox"]',function () {
var $tr = $(this).closest('tr');
var checkState = $(this).prop('checked'); //选中状态
if(!$tr.hasClass('datagrid-header-row')){ //是否是全选
var rowIndex = $tr.attr('datagrid-row-index'); //查找表格行的index
//根据index找到对应行的存放id值和realName 值的td(由于easyui的checkbox和内容是分开两个表格拼接起来的,只能根据行的index 查找,datagrid-view2是内容的div)
var id = $('.datagrid-view2 tr'+'[datagrid-row- index='+rowIndex+']').find('td[field="id"]>div').text();
var realName = $('.datagrid-view2 tr'+'[datagrid-row-index='+rowIndex+']').find('td[field="realName"]>div').text();
if(checkState){ //是否选中
idArr.push(id); //当前选中则将id和名称放入数组
realNameArr.push(realName);
}else {
for(var i=0;i<idArr.length;i++){
if(idArr[i] == id){ //取消选中则从数组中移除当前的
idArr.splice(i,1);
realNameArr.splice(i,1);
break; //匹配完成中断循环
}
}
}
}else { //全选
var $selectedTr = $('.datagrid-view2 tr.datagrid-row-selected'); //所有选中的tr
idArr = []; //点击全选时不管选不选中都先清空
realNameArr = [];
if(checkState){ //是否选中
$.each($selectedTr,function (i,item) { //全选就循环所有tr,再取出所需的值一一放入数组
var id =$(item).find('td[field="id"]>div').text();
var realName =$(item).find('td[field="realName"]>div').text();
idArr.push(id);
realNameArr.push(realName);
})
}
}
})
}
</script>
附图