jquery jtable应用

约定不等于承诺〃 2022-05-21 07:38 140阅读 0赞

## 一、前端js ##

#### 1.1 点击查询 ####

$("#xmdCompareBtn").click(queryXmdCompare);

####  ####

#### 1.2 加载form表单数据 ####

//查询区域任务
    function queryXmdCompare(){
        var params = $("#xmdCompareForm").serialize();
        $("#xmdCompareContainer").jtable("load",params);
    }

#### 1.3 jtable 结构 ####

//加载父列表
    function loadXmdCompare(){
        $("#xmdCompareContainer").jtable({
            paging:true,
            pageSize:xmdComparePageSize,
            gotoPageArea:'none',
            columnSelectable: false,//右击列表头显示列
            pageSizeChangeArea:false,
            selectingCheckboxes:true,
            selecting: true, //Enable selecting
            multiselect: true, //Allow multiple selecting
            selectOnRowClick: false,
            actions:{
                listAction:contextpath+"secure/res/xmdcompare/queryXmdCompare.html"
            },
            fields:{
                id:{
                    key:true,
                    list:false },
                /*     设置子table    */
                Exams:{
                    title:'',
                    width:'4%',
                    display: function (data) {
                        var $img = $('<i data-id="" class="fa fa-plus"/>').css({
      "cursor":"pointer"});
                        var subnetRet = "subnetRet="+JSON.stringify(data.record.subnetRet);
    
                        //alert(JSON.stringify(subnetRet));
                        /*  触发子table按钮   */
                        $img.click(function(e){
                            //获取当前ROW对象
                            var $row =  $("#xmdCompareContainer").jtable("getRowByKey", data.record.id);
                            //子表是否已展开
                            var isOpen = $("#xmdCompareContainer").jtable("isChildRowOpen", $row);
                            //若子表已展开，则关闭子表
                            if(isOpen){
                                //修改图标为加号
                                $img.attr("class", "fa fa-plus");
                                //关闭子表
                                $("#xmdCompareContainer").jtable("closeChildTable", $row, function(row){});
                                return $img;
                            }
    
                            //修改图标为减号
                            $img.attr("class", "fa fa-minus");
    
                            /* 子列表 */
                            $('#xmdCompareContainer').jtable('openChildTable',$img.closest('tr'),
                                {
                                    columnResizable:false,
                                    columnSelectable: false,
                                    showCloseButton: false,
                                    actions: {
                                        listAction:appCtx +"secure/res/rescompare/childTable.html"
                                    },
    
                                    fields: {
                                        action:{
                                            width:'20%',
                                            title:"动作"
                                        },
                                        actDetail:{
                                            width:'50%',
                                            title:"动作详情"
                                        },
                                        actDescribe:{
                                            width:'30%',
                                            title:"附加描述"
                                        }
                                    }
    
                                },function (data) { //opened handler
                                    data.childTable.jtable('load',subnetRet);
                                });
                        });
                        return $img;
                    }
                },
                nwName:{
                    width:'6%',
                    title:"区域"
                },
                nameEn:{
                    width:'18%',
                    title:"网元名称"
                }
                linkAction:{
                    width:'6%',
                    title:"链路动作",
                    display:function(data){
                        var subnetRet=data.record.subnetRet;
                        if(subnetRet == '' || subnetRet == null) return "";
                        switch (subnetRet.linkAction) {
                            case 'LINK_NO_ACTION':
                                return '无';
                                break;
                            case 'LINK_ADD_ACTION':
                                return '新增';
                                break;
                            case 'LINK_DEL_ACTION':
                                return '删除';
                                break;
                            case 'LINK_MODIFY_ACTION':
                                return '修改';
                                break;
                            case 'LINK_CHANGE_ACTION':
                                return '修改';
                                break;
                            case 'LINK_EXCEPTION_ACTION':
                                return '异常';
                                break;
                            default:
                                return "";
                                break;
                        }
                    }
                },
                compareDate:{
                    width:'14%',
                    title:"比对时间",
                    type: 'date',
                    displayFormat: 'yyyy-MM-dd hh:mm:ss'
                }
            },
            selectionChanged: function(event, data){
                var selectedRows = $("#xmdCompareContainer").jtable("selectedRows");
                if(selectedRows.length == 0){
                    $("#sureUpdateXmdCompare").attr("disabled", "disabled");
                    $("#removeResult").attr("disabled", "disabled");
                }else{
                    var flag = false;
                    selectedRows.each(function () {
                        var detail = $(this).data('record').detail;
                        if(detail.indexOf("NE_DEL_ACTION") > 0){
                            flag = true;
                            $(this).removeClass('jtable-row-selected');
                            $(this).find('td.jtable-selecting-column input').removeAttr('checked');
    
                            //更新表头的全选复选框样式
                            // $("#xmdCompareContainer").jtable("refreshSelectAllCheckboxState");
                        }
                    });
    
                    //删除网元动作不允许确认更新，要求到资源配置界面操作
                    if(flag == true){
                        doAlert("删除网元动作不允许确认更新，请到资源配置界面进行操作！");
                        var tempSelectedRows = $("#xmdCompareContainer").jtable("selectedRows");
                        if(tempSelectedRows.length == 0){
                            $("#sureUpdateXmdCompare").attr("disabled", "disabled");
                            $("#removeResult").attr("disabled", "disabled");
                        }else{
                            $("#sureUpdateXmdCompare").removeAttr("disabled");
                            $("#removeResult").removeAttr("disabled");
                        }
                    }else{
                        $("#sureUpdateXmdCompare").removeAttr("disabled");
                        $("#removeResult").removeAttr("disabled");
                    }
                }
            }
        });
        queryXmdCompare();
    }

## 二、后台数据 ##

@RequestMapping("queryXmdCompare.html")
    @ResponseBody
    public PageResultBean queryXmdCompare(Integer jtStartIndex, Integer jtPageSize,ResCompareBean bean){
       PageResultBean pr = new PageResultBean();
       try {   
           bean.setFromNumber(jtStartIndex);
            bean.setToNumber(jtStartIndex+jtPageSize);
           pr.setRecords(xmdService.selectPageXmdCompare(bean));
           pr.setTotalRecordCount(xmdService.countXmdCompare(bean));
               
          pr.setMessage("查询成功！");
               pr.setResult("OK");
           } catch (Exception e) {
               pr.setMessage("查询失败！");
               pr.setResult("ERROR");
               e.printStackTrace();
           }
           return pr;
    }