jeecg重新打开弹窗,搜索时checkbox旧值被清空问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/88756632

问题:使用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>

方法二(jeecg中由于easyui点击行时checkedbox的change事件失效,用行点击替换)
<script>
   var ids = "${userIds}";  //后台返回的已选中的id和名字
   var realNames = "${realNames}";
   var idArr=[],realNameArr=[];
   if (ids != '') {
       idArr = ids.split(","); //根据返回的字符串从逗号截取并组成数组
       realNameArr = realNames.split(",");
   }

//列表加载完成后记录选中的
function initCheck(data){
    for(var i=0;i<idArr.length;i++){
        if(idArr[i]!=""){
            $("#noCurDepartUserList").datagrid("selectRecord",idArr[i]);
        }
    }
    //单选和全选
    changeCheckbox()
}

function changeCheckbox() {
    //单选,选中则放入数组,否则从数组移除
    $('.datagrid-body tr').on('click',function () {
        var rowIndex = $(this).attr('datagrid-row-index');
        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(!$(this).hasClass('datagrid-row-selected')){ //是否选中
            idArr.push(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;   //匹配完成中断循环
                }
            }
        }

    });
    //全选
    $('.datagrid-header-check input[type="checkbox"]').on('click',function () {
        var checkState = $(this).prop('checked');  //选中状态
        idArr = []; //点击全选时不管选不选中都先清空
        realNameArr = [];
        if(checkState){ //是否选中
            var $selectedTr = $('.datagrid-view2 tr.datagrid-row-selected');
            $.each($selectedTr,function (i,item) {
                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>

附图