jquery jtable应用

一、前端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;
}