Browse Source

增加表格排序

CharlesLeocc 3 years ago
parent
commit
d050b20c4e

+ 348 - 0
src/common/AjaxSend.class.ts

@@ -1501,7 +1501,355 @@ class AjaxSend {
         option.dataTable = $(that.domObj.find("#" + elementId)[0]).DataTable(table_data);
         return option.dataTable;
     }
+    public DataTables_check_order2(option) {//服务端对某一列进行排序
+        let ajaxSend = this;
+        let that = option.that, elementId = option.elementId, url = option.url, searchInfo = option.searchInfo, ascList = option.ascList,
+            displayTitle = option.displayTitle, displayField = option.displayField, beforeTrClickEvent = option.beforeTrClickEvent,
+            afterTrClickEvent = option.afterTrClickEvent, drawEvent = option.drawEvent, errmassage = option.errmassage, nullmessage = option.nullmessage,
+            title = option.exportTitle, extentDisplayTitle = option.extentDisplayTitle, extentDisplayContent = option.extentDisplayContent, serachCallBack = option.serachCallBack;
+        let isCheck = null;
+        if (option.isCheck != undefined || option.isCheck != null) {
+            isCheck = option.isCheck
+        } else {
+            isCheck = true;
+        }
+        let requestMethod = null;
+        let contentType = "application/x-www-form-urlencoded"
+        if (option.requestMethod != undefined || option.requestMethod != null) {
+            requestMethod = option.requestMethod;
+            contentType = "application/json;charset=utf-8";
+        } else {
+            requestMethod = "GET";
+        }
+        let classThis = this;
+        if (option.dataTable) {
+            option.dataTable.destroy();
+        }
+        //displayTitle表头
+        let tableThead_th
+        tableThead_th = '<th title="本页全选" width="50"><input type="checkbox" class="AllCheck" /></th>';
+        for (let e of displayTitle) {
+            tableThead_th += '<th title="' + e + '">' + e + '</th>';
+        }
+        if (extentDisplayTitle && extentDisplayTitle.length > 0) {
+            for (let el of extentDisplayTitle) {
+                tableThead_th += '<th title="' + el + '">' + el + '</th>';
+            }
+        }
+        that.domObj.find("#" + elementId).empty().append("<thead><tr>" + tableThead_th + "</tr></thead>");
+        //组织DataTable参数
+        let columns = [];
+        columns.push({ "data": "input" ,"orderable": false})
+        for (let e of displayField) {
+            if(e.order){
+                columns.push({ "data": e.name ,"orderable": true,})//仅createTime列开启排序
+            }else{
+                columns.push({ "data": e.name ,"orderable": false})
+            }
+
+        }
+        if (extentDisplayContent && extentDisplayContent.length > 0) {
+            for (let el of extentDisplayContent) {
+                columns.push({ "data": el.field ,"orderable": false})
+            }
+        }
+        let table_data = {
+            dom: 't' +
+                '     <"row"' +
+                '           <" information"ri>' +
+                '           <" length-changing"l>' +
+                '           <" pull-right pagination"p>' +
+                '           <" turnToolbar">' +
+                '           <" Bfrtip">' +
+                '     >' +
+                "<'row_datable_export'<'col-md-12'B>>",
+            buttons: [{
+                extend: 'excelHtml5',
+                title: title,
+                customize: function (xlsx) {
+                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
+                },
+                exportOptions: {
+                    format: {
+                        body: function (data, row, column, node) {
+                            if (data.indexOf("singleCheckBox") != -1) {
+                                return (row + 1);
+                            } else {
+                                return node.textContent
+                            }
+                        },
+                        header: function (data, column, node) {
+                            if (data.indexOf("AllCheck") != -1) {
+                                return "序号";
+                            } else {
+                                return data
+                            }
+                        }
+                    }
+                }
+            }],
+            language: {
+                "lengthMenu": "每页_MENU_条",
+                "zeroRecords": "未查询到任何记录",
+                "info": "共 _TOTAL_ 条",
+                "infoEmpty": "",
+                "infoFiltered": "",
+                "processing": "查询中,请稍等...",
+                "paginate": {
+                    "first": "首页",
+                    "last": "尾页",
+                    "next": ">",
+                    "previous": "<"
+                },
+                "search": "搜索: ",
+            },
+            pagingType: "simple",
+            paging: true,
+            scrollCollapse: false,
+            processing: true,
+            scrollX: true,
+            scrollY: "calc(100% - 50px)",
+            ordering: true,
+            order: [[ 1, 'asc' ]],//第2列升序,第一列input框隐藏了
+            lengthMenu: [10, 50, 100, 1000], //更改显示记录数选项
+            drawCallback: function (settings) {
+                $(settings.nTable).off('click', "tbody tr").on('click', "tbody tr", function (e) {
+                    let dom = $(e.currentTarget).find(".currentTableData");
+                    let index = parseInt(dom.attr("index"));
+                    if (option.dataTable.aExtentData && option.dataTable.aExtentData.currentAllData && option.dataTable.aExtentData.currentAllData.length == 0) {
+                        return;
+                    }
+                    let clickData = option.dataTable.aExtentData.currentAllData[index];
+                    if (beforeTrClickEvent && !beforeTrClickEvent(clickData)) {
+                        return;
+                    };
+                    if (option.dataTable.aExtentData && option.dataTable.aExtentData.currentTableData && option.dataTable.aExtentData.currentTableData.id && clickData.id == option.dataTable.aExtentData.currentTableData.id) {
+                        return;
+                    } else {
+                        option.dataTable.aExtentData.currentTableData = clickData;
+                    }
+                    $(settings.nTable).find("tbody tr.active").removeClass("active");
+                    $(e.currentTarget).addClass("active");
+                    if (afterTrClickEvent && !afterTrClickEvent()) {
+                        return;
+                    };
+                });
+                if (drawEvent) {
+                    drawEvent();
+                }
+                //添加当前第几页,共几页
+                let dom = $(settings.nTableWrapper);
+                dom.find(".row_datable_export").attr("style", "display:none");
+                let addPosi = dom.find(".previous");
+                let pagehtml = '<li class="addPageInfo"><span>第' + (settings._iDisplayStart / settings._iDisplayLength + 1) + '页/共' + Math.ceil(settings._iRecordsDisplay / settings._iDisplayLength) + '页</span></li>';
+                addPosi.after(pagehtml);
+                //添加自动跳转
+                let turnAddPosi = dom.find('.turnToolbar');
+                let turnpagehtml = '<input type="number" class="addPageIndexInput" value="' + (settings._iDisplayStart / settings._iDisplayLength + 1) + '" />  <button type="button" class="btn  btn-sm btn-default addPageIndexButton">跳转</button>'
+                turnAddPosi.empty().append(turnpagehtml);
+                turnAddPosi.find('.addPageIndexButton').off().click(e => {
+                    let pageInfo = option.dataTable.page.info();
+                    let pageIndex = (turnAddPosi.find('.addPageIndexInput').val());
+                    if (pageIndex > 0 && pageIndex <= pageInfo.pages) {
+                        option.dataTable.deafultPageIndex = pageIndex;
+                        option.dataTable.ajax.reload();
+                    } else {
+                        option.dataTable.deafultPageIndex = -10;
+                        that.toast.show("跳转页数超过查询范围请重新设置!");
+                    }
+                });
+                //全选
+                dom.find('.AllCheck').off().click(e => {
+                    let currentDom = $(e.currentTarget)[0];
+                    if (currentDom["checked"]) {
+                        dom.find(".singleCheckBox").prop('checked', true);
+                    } else {
+                        dom.find(".singleCheckBox").prop('checked', false);
+                    };
+                    classThis.DataTables_check_getCheck(option.dataTable, dom);
+                    // return false;
 
+                });
+                //单选
+                dom.find('.singleCheckBox').off().click(e => {
+                    let currentDom = dom.find(".singleCheckBox:checked");
+                    let currentAllDom = dom.find(".singleCheckBox");
+                    if (currentDom.length == currentAllDom.length) {
+                        dom.find(".AllCheck").prop('checked', true);
+                    } else {
+                        dom.find(".AllCheck").prop('checked', false);
+                    }
+                    classThis.DataTables_check_getCheck(option.dataTable, dom);
+                });
+                if (!isCheck) {
+                    dom.find(".singleCheckBox").parent('td').attr('style', 'display:none');
+                    dom.find(".AllCheck").parent('th').attr('style', 'display:none')
+                }
+                dom.find(".sort").off().click(e =>{
+                    debugger
+                    that.searchInfo["orders[0].asc"] = !that.searchInfo["orders[0].asc"]
+                })
+            }.bind(that),
+            serverSide: true,
+            ajax: {
+                headers: that.header,
+                type: requestMethod,
+                data: function (e) {
+                    let start = (e['start'] / e['length']) + 1;
+                    if (option.dataTable && option.dataTable.deafultPageIndex && option.dataTable.deafultPageIndex != -10) {
+                        start = parseInt(option.dataTable.deafultPageIndex);
+                        option.dataTable.context[0]._iDisplayStart = (start - 1) * option.dataTable.context[0]._iDisplayLength
+                        option.dataTable.deafultPageIndex = -10;
+                    }
+                    let searchData = null;
+                    if (that.searchInfo) {
+                        that.searchInfo.current = start || that.config.pagenumber;
+                        that.searchInfo.size = e['length'] || that.config.pagesize;
+                        searchData = that.searchInfo;
+                    } else {
+                        searchInfo.current = start || that.config.pagenumber;
+                        searchInfo.size = e['length'] || that.config.pagesize;
+                        searchData = searchInfo;
+                    }
+                    if (requestMethod == "POST") {
+                        let data = JSON.stringify(searchData);
+                        searchData = data;
+                    }
+                    if (ascList && ascList.length > 0) {//option传入要排序的列
+                        searchData["orders[0].asc"] = (e.order[0].dir == 'asc' ? true : false)
+                        searchData ["orders[0].column"] = ascList[e.order[0].column]
+                    }
+                    return searchData;
+                },
+                url: that.apiRoot + url,
+                dataType: "json",
+                contentType: contentType,
+                async: true,
+                error: function (e) {
+                    that.loadWait.hide();
+                    let title = '查询失败!';
+                    if (errmassage) {
+                        title = errmassage;
+                    }
+                    that.toast.show(title);
+                    console.error(e);
+                },
+                dataSrc: function (results) {
+                    that.AppX.runtimeConfig.map.infoWindow.hide();
+                    if (results.code == 1) {
+                        var value = results;
+                        if (serachCallBack) {
+                            serachCallBack(results);
+                        }
+                        results = {};
+                        option.dataTable.aExtentData = {};
+                        option.dataTable.aExtentData.currentAllData = value.result.records;
+                        //这里除了把数据处理后返回给DataTables,还需要把另外三个参数处理为顶级的属性(加入另外两个参数过会会有问题只需要recordsFiltered)
+                        value.recordsFiltered = value.result.total;
+                        results.data = [];
+                        if (value.result.records.length == 0) {
+                            let title = '未查询到数据!';
+                            if (nullmessage) {
+                                title = nullmessage;
+                            }
+                            that.toast.show(title);
+                            that.loadWait.hide();
+                            that.AppX.runtimeConfig.loadMask.hide();
+                            that.AppX.runtimeConfig.loadFulldMask.hide();
+                            return results.data;
+                        };
+
+                        //渲染最多支持二级结构(如果还有多级的话只能自己扩展了),且二级中存在多个则只渲染第一个
+                        $.each(value.result.records, function (i, item) {
+                            let itemData = {};
+                            for (let e of displayField) {
+                                //特殊结构渲染(每个特殊结构都是针对于某个模块的特殊结构定制的使用_special_来判断特殊结构)
+                                if (e.name.indexOf('_special_') != -1) {
+                                    //针对于设备运行台账模块
+                                    if (e.name.indexOf('EquipmentOperationLedger') != -1) {
+                                        let dataInfo = "";
+                                        if (item['content']) {
+                                            item['content'].forEach(a => {
+                                                dataInfo += (ajaxSend.verificationHelper.setNullAndUndefined(a.name) + ":" + ajaxSend.verificationHelper.setNullAndUndefined(a.names) + ";")
+                                            })
+                                        }
+                                        dataInfo = ajaxSend.verificationHelper.setNullAndUndefined(dataInfo);
+                                        itemData[e.name] = "<span title='" + dataInfo + "'>" + dataInfo + "</span>";
+                                    }
+                                }
+                                //一级结构的渲染
+                                else if (e.name.indexOf('/') == -1) {
+                                    let dataInfo = ajaxSend.verificationHelper.setNullAndUndefined(item[e.name]);
+                                    //判断是否是数字
+                                    if (typeof (dataInfo) == "number") {
+                                        //判断是否是小数
+                                        if (dataInfo % 1 != 0) {
+                                            dataInfo = dataInfo.toFixed(2);
+                                        } else {
+                                            dataInfo = dataInfo;
+                                        }
+                                    }
+                                    itemData[e.name] = "<span title='" + dataInfo + "'>" + dataInfo + "</span>";
+                                }
+                                //二级结构的渲染
+                                else {
+                                    let fieldArr = e.name.split('/');
+                                    //获取二级数据列
+                                    let fileld1 = fieldArr[0];
+                                    //获取二级数据
+                                    let fileld2 = fieldArr[1];
+                                    let dataList = item[fileld1];
+                                    if (dataList) {
+                                        let dataItem = null;
+                                        //是数组则取第一个,不是数组直接赋值
+                                        if (dataList instanceof Array) {
+                                            if (dataList.length > 0) {
+                                                dataItem = dataList[0]
+                                            }
+                                        } else {
+                                            if (dataList != "") {
+                                                dataItem = dataList;
+                                            }
+                                        }
+                                        //获取数据
+                                        let dataInfo = null;
+                                        if (dataItem) {
+                                            dataInfo = ajaxSend.verificationHelper.setNullAndUndefined(dataItem[fileld2]);
+                                        } else {
+                                            dataInfo = ajaxSend.verificationHelper.setNullAndUndefined(undefined);
+                                        }
+                                        itemData[e.name] = "<span title='" + dataInfo + "'>" + dataInfo + "</span>";
+                                    } else {
+                                        itemData[e.name] = "<span title='" + ajaxSend.verificationHelper.setNullAndUndefined(undefined) + "'>" + ajaxSend.verificationHelper.setNullAndUndefined(undefined) + "</span>";
+                                    }
+                                }
+                            }
+                            itemData["input"] = "<input class='singleCheckBox currentTableData' type='checkbox' index='" + i + "'>";
+                            if (extentDisplayContent && extentDisplayContent.length > 0) {
+                                for (let el of extentDisplayContent) {
+                                    itemData[el.field] = el.fieldContent
+                                }
+                            }
+                            results.data.push(itemData);
+                        });
+                        that.loadWait.hide();
+                        that.AppX.runtimeConfig.loadMask.hide();
+                        that.AppX.runtimeConfig.loadFulldMask.hide();
+                        return results.data;
+                    } else {
+                        that.toast.show(results.message);
+                        console.error(results.message);
+                        that.loadWait.hide();
+                        that.AppX.runtimeConfig.loadMask.hide();
+                        that.AppX.runtimeConfig.loadFulldMask.hide();
+                    }
+                }
+            },
+            columns: columns,
+        };
+        option.dataTable = $(that.domObj.find("#" + elementId)[0]).DataTable(table_data);
+        return option.dataTable;
+    }
 
     /**此方法有check选中,请求全部数据前端渲染
      * 本方法将在option.dataTable对象中加入当前选中列表的数据(option.dataTable.aExtentData.currentTableData)和所有查询的数据(option.dataTable.aExtentData.currentAllData)

+ 5 - 4
src/widgets/PipeRecordConfirm/Widget.ts

@@ -73,8 +73,8 @@ class PipeRecordConfirm extends BaseWidget {
             buriedAddress: siteName ? siteName : "",
             state:'1',
             rejectedFlag:0,//查询不是驳回状态的单子
-            "orders[0].asc":false,
-            "orders[0].column":"buried_time"
+            "orders[0].asc":true,
+            "orders[0].column":"create_time"
         }
     }
 
@@ -222,10 +222,11 @@ class PipeRecordConfirm extends BaseWidget {
             elementId: "PipeRecordConfirminfodata",
             url: that.config.getRushList,
             isCheck: false,
+            ascList:["_input","create_time"],//第一个为input占据
             searchInfo: that.searchInfo,//条件在不断变化,故需要有全局的条件监听
             // testData:this.config.dataInfo,
             displayTitle: ["申请时间", "工程名称", "埋设地址", "状态","备注"],
-            displayField: ["createTime", "name", "buriedAddress","stateName", "description"],
+            displayField: [{name:"createTime",order:true}, {name:"name",order:false}, {name:"buriedAddress",order:false},{name:"stateName",order:false}, {name:"description",order:false}],
             extentDisplayTitle: ['确认'],
             extentDisplayContent: [{
                 field: "infoWrite",
@@ -245,7 +246,7 @@ class PipeRecordConfirm extends BaseWidget {
             nullmessage: undefined,
             exportTitle: "测绘记录"
         }
-        that.dataTable = this.ajaxSend.DataTables_check(option);
+        that.dataTable = this.ajaxSend.DataTables_check_order2(option);
     }
 
     /**

+ 2 - 2
src/widgets/SqlQuery/config.json

@@ -10,9 +10,9 @@
     "saveFiled":{
         "气源":["地址","埋设方式","设备编码","埋深","管径","地面高程","材质","管线类别","特征"],
         "场站":["名称","地址","供气能力","气源","设计压力"],
-        "调压设备":["设备编码","地址","材质","规格型号","生产厂家","所属区县","竣工日期","特征"],
+        "调压设备":["设备编码","地址","材质","规格型号","生产厂家","所属区县","竣工日期","特征","类型"],
         "穿越点":["地址","状态","材质","备注"],
-        "阀门":["设备编码","材质","规格型号","特征","生产厂家","设施状态","所属区县","竣工日期"],
+        "阀门":["设备编码","材质","规格型号","特征","生产厂家","设施状态","所属区县","竣工日期","类型"],
         "阴极保护":["保护电位","编码","埋深深度","高程","位置","材质","特征","埋设方式"],
         "SCADA监测点":["地址","埋设方式","设备编码","埋深","管径","地面高程","材质","管线类别","特征"],
         "节点":["地址","防腐等级","型号","埋设方式","设备编码","埋深","管径","地面高程","材质","管线类别","特征"],