zhwj3D/Common/ProjectClass/Component/tableClass.js

//tableID前台被操作表格ID
//sourceDataArray
//columnsArray列数组
//主键用户点击表格获取绑定数据源Object
// 根据数据源动态创建表格
// tableID创建表格名称
// sourceDataArray数据源数组
// columnsArray 需要显示列原始名称数组
// columnDispalyNames列实际显示名称数组
function dyCretateTableByArray(tableID,sourceDataArray,columnsArray,columnDispalyNames,bool_needHeadColumn,editButtons){
    var _row;
    var _cell;
//     tableID 表id   table_AllProjects
//     sourceDataArray 数据数组
//     columnsArray 字段数组
//     columnDispalyNames null
//     bool_needHeadColumn true
//     editButtons true
    if(isEmptyValue(bool_needHeadColumn)){ //是否需要表头列
        bool_needHeadColumn = false;
    }

    if(isEmptyValue(columnsArray) == true){ //判断原始列是否存在
        columnsArray = [];
        for (var obj_Name in sourceDataArray[0]){
            if(obj_Name != "rn")
                columnsArray.push(obj_Name);
        }
    }

    var editTable =  document.getElementById(tableID);
    editTable.innerHTML = "";
    // 添加表格表头
    if(bool_needHeadColumn){
        var tr = document.createElement("tr");
        if(isEmptyValue(columnDispalyNames)){
            for (var n=0; n<columnsArray.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnsArray[n];
                tr.appendChild(th);
            }
        }
        else{
            for (var n=0; n<columnDispalyNames.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnDispalyNames[n];
                tr.appendChild(th);
            }
        }
      
        if(isEmptyValue(editButtons) == false){
            var th = document.createElement("th");
            th.setAttribute("style","width:90px");
            th.innerText =  "操作";
            tr.appendChild(th);
        }
        editTable.appendChild(tr);
    }
    if (isEmptyValue(sourceDataArray)){
        return;
    }
    for(var i = 0; i < sourceDataArray.length; i++) {
        var currentObject = sourceDataArray[i];
        _row = document.createElement("tr");
        _row.onclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        _row.ondblclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        editTable.appendChild(_row); //创建行

        for (var j = 0; j < columnsArray.length;j++){
            var columnName = columnsArray[j];
            for (var objName in currentObject){
                if(columnName == objName){ //判断预定义列与读取属性是否匹配
                    _cell = document.createElement("td");
                    _cell.innerText = currentObject[objName];
                    _cell.setAttribute("class","tdclass");//设置文字超过表格列长度样式
                    if(tableID == "statistics4Table"){
                        _cell.setAttribute("style","height:40px");
                    }
                    _row.appendChild(_cell);
                    // _cell.onmouseover = function (_cell) {
                    //     GetValueForToolTip(_cell);
                    // };
                
                    _row.appendChild(_cell);
                }
            }
        }
       
        if (isEmptyValue(editButtons) == false ){ //添加编辑删除按钮
            _cell = document.createElement("td");
            _cell.setAttribute("class","tdclass");//设置文字超过表格列长度样式
            _cell.setAttribute("align","center");

            var btnsh = document.createElement("button");
            btnsh.setAttribute("class","am-btn am-btn-success");
            btnsh.setAttribute("type","button");
            btnsh.innerText = "审核";
            btnsh.onclick = function (evt) {
                editButtonsClickHander(evt,sourceDataArray);
            };

            var btn = document.createElement("button");
            btn.setAttribute("class","am-btn am-btn-success");
            btn.setAttribute("style","margin-left:5px;");
            btn.setAttribute("type","button");
            btn.innerText = "编辑";
            btn.onclick = function (evt) {
                editButtonsClickHander(evt,sourceDataArray);
            };

            var btn2 = document.createElement("button");
            btn2.setAttribute("class","am-btn am-btn-success");
            btn2.setAttribute("style","margin-left:5px;");
            btn2.setAttribute("type","button");
            btn2.innerText = "删除";
            btn2.onclick = function (evt) {
                editButtonsClickHander(evt,sourceDataArray);
            };
            var btn3 = document.createElement("button");
           /* btn3.setAttribute("class","am-btn am-btn-success");*/
            
            btn3.setAttribute("class","button1");
            btn3.setAttribute("style","margin-left:5px;");
            btn3.setAttribute("type","button");
            btn3.innerText = "详情";
            btn3.onclick = function (evt) {
                editButtonsClickHander(evt,sourceDataArray);
            };


            if(tableID == "queryTable1"){
                _cell.appendChild(btn3);
            }
            if(tableID == "statistics2Table"){
                _cell.appendChild(btn3);
            }
            if(tableID == "statistics3Table"){
                _cell.appendChild(btn3);
            }
            _row.appendChild(_cell);
        }
    }
}
//把数据库返回结果变成 tableString
function dyCretateTableStringByArray(sourceDataArray){
    var tabStr="<tr>";
        for (var obj_Name in sourceDataArray[0]){
            if(obj_Name != "rn")
                
            tabStr+="<td>"+ obj_Name+"</td>";
        }
    tabStr+="</tr>";
    for(var i = 0; i < sourceDataArray.length; i++) {
        
        tabStr+="<tr>";
        var currentObject = sourceDataArray[i];
        for (var objName in currentObject){
            tabStr+="<td>" +currentObject[objName]+"</td>"
        }
        tabStr+="</tr>"
    }
    return tabStr;
 }


//权限列表内容加载
function dyCretateAuthorityTableByArray(tableID,sourceDataArray,columnsArray,columnDispalyNames,bool_needHeadColumn){
    var _row;
    var _cell;
    if(isEmptyValue(bool_needHeadColumn)){ //是否需要表头列
        bool_needHeadColumn = false;
    }

    if(isEmptyValue(columnsArray) == true){ //判断原始列是否存在
        columnsArray = [];
        for (var obj_Name in sourceDataArray[0]){
            if(obj_Name != "rn")
                columnsArray.push(obj_Name);
        }
    }

    var editTable =  document.getElementById(tableID);
    editTable.innerHTML = "";
    // 添加表格表头
    if(bool_needHeadColumn){
        var tr = document.createElement("tr");
        if(isEmptyValue(columnDispalyNames)){
            for (var n=0; n<columnsArray.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnsArray[n];
                tr.appendChild(th);
            }
        }
        else{
            for (var n=0; n<columnDispalyNames.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnDispalyNames[n];
                tr.appendChild(th);
            }
        }
        editTable.appendChild(tr);
    }
    if (isEmptyValue(sourceDataArray)){
        return;
    }
    for(var i = 0; i < sourceDataArray.length; i++) {
        var currentObject = sourceDataArray[i];
        _row = document.createElement("tr");
        _row.onclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        _row.ondblclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        editTable.appendChild(_row); //创建行

        for (var j = 0; j < columnsArray.length;j++){
            var columnName = columnsArray[j];
            var index = 0;
            for (var objName in currentObject){
                if(columnName == objName){ //判断预定义列与读取属性是否匹配
                    _cell = document.createElement("td");
                    if(columnName != "资源名称"){
                        var check = document.createElement("input");
                        check.setAttribute("type","checkbox");
                        check.setAttribute("name",j+"_"+i);
                        check.setAttribute("value",columnName);
                        if(currentObject[objName] == "0")
                            check.removeAttribute("checked");
                        else
                            check.setAttribute("checked",true);
                        check.onclick = function (event) {
                            refreshSourceData(event);
                        };
                        _cell.appendChild(check);
                    }
                    else{
                        _cell.innerText = currentObject[objName];
                        _cell.setAttribute("class","tdclass");//设置文字超过表格列长度样式
                        _cell.onmouseover = function (_cell) {
                            GetValueForToolTip(_cell);
                        };
                    }
                    _row.appendChild(_cell);
                    index++;
                }
            }
            if(columnName == "全选"){
                _cell = document.createElement("td");
                var check = document.createElement("input");
                check.setAttribute("type","checkbox");
                check.setAttribute("name",j);
                if(getRowCheckboxState(i))
                    check.setAttribute("checked",true);
                else
                    check.removeAttribute("checked");
                check.onclick = function (event) {
                    checkboxSelectAll(event.currentTarget.parentElement.parentElement.rowIndex-1,event.currentTarget.checked);
                };
                _cell.appendChild(check);
                _row.appendChild(_cell);
            }
        }
    }
}

function refreshSourceData(event){
    var index = event.currentTarget.parentElement.parentElement.rowIndex;
    var check = event.currentTarget;
    authorityArray[index][check.value] = check.checked == true ?1:0;
    var checkRowAll = getCheckboxByName(index);
    if(isEmptyValue(checkRowAll) == false)
        checkRowAll.setAttribute("checked",getRowCheckboxState(index));
}

function dyCretateTableByArrayAndReturn(sourceDataArray,columnsArray,columnDispalyNames,bool_needHeadColumn){
    var _row;
    var _cell;
    if(isEmptyValue(bool_needHeadColumn)){ //是否需要表头列
        bool_needHeadColumn = false;
    }

    if(isEmptyValue(columnsArray) == true){ //判断原始列是否存在
        columnsArray = [];
        for (var obj_Name in sourceDataArray[0]){
            if(obj_Name != "rn")
                columnsArray.push(obj_Name);
        }
    }
    var div = document.createElement("div");
    var tableInfo  =  document.createElement("table");
    div.appendChild(tableInfo);
    tableInfo.setAttribute("class","am-table am-table-bordered am-table-radius am-table-striped am-table-hover");
    tableInfo.setAttribute("style","table-layout: fixed;width:100%;");
    var editTable =  document.createElement("tbody");
    tableInfo.appendChild(editTable);
    editTable.innerHTML = "";
    // 添加表格表头
    if(bool_needHeadColumn){
        var tr = document.createElement("tr");
        if(isEmptyValue(columnDispalyNames)){
            for (var n=0; n<columnsArray.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnsArray[n];
                tr.appendChild(th);
            }
        }
        else{
            for (var n=0; n<columnDispalyNames.length;n++){
                var th = document.createElement("th");
                th.innerText =  columnDispalyNames[n];
                tr.appendChild(th);
            }
        }
        editTable.appendChild(tr);
    }
    for(var i = 0; i < sourceDataArray.length; i++) {
        var currentObject = sourceDataArray[i];
        _row = document.createElement("tr");
        _row.onclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        _row.ondblclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        editTable.appendChild(_row); //创建行

        for (var j = 0; j < columnsArray.length;j++){
            var columnName = columnsArray[j];
            for (var objName in currentObject){
                if(columnName == objName){ //判断预定义列与读取属性是否匹配
                    _cell = document.createElement("td");
                    _cell.innerText = currentObject[objName];
                    _cell.setAttribute("class","tdclass");//设置文字超过表格列长度样式
                    _row.appendChild(_cell);
                    _cell.onmouseover = function (_cell) {
                        GetValueForToolTip(_cell);
                    };
                    _row.appendChild(_cell);
                }
            }
        }
    }
    return div;
}

//动态创建带有状态的表格 仅适用于青浦重大办项目
function dyCretateTableWitdhStateByArray(tableID,sourceDataArray,columnsArray,columnDispalyName,primaryKey){
    var _row;
    var _cell;
    var primaryKeyIndex = -1;
    var bool_needHeadColumn = false; //是否需要表头列
    if(isEmptyValue(primaryKey) == false){
        if(isEmptyValue(columnsArray) == true){
            bool_needHeadColumn = false;
            columnsArray = [];
            for (var obj_Name in sourceDataArray[0]){
                columnsArray.push(obj_Name);
            }
        }
        for (var index=0; index<columnsArray.length;index++){
            if(columnsArray[index] == primaryKey){
                primaryKeyIndex = index;
                break;
            }
        }
    }
    var editTable =  document.getElementById(tableID);
    editTable.innerHTML = "";
    if(bool_needHeadColumn){
        var tr = document.createElement("tr");
        for (var n=0; n<columnDispalyName.length;n++){
            var th = document.createElement("th");
            th.innerText =  columnDispalyName[n];
            tr.appendChild(th);
        }
        editTable.appendChild(tr);
    }
    for(var i = 0; i < sourceDataArray.length; i++) {
        var currentObject = sourceDataArray[i];
        _row = document.createElement("tr");
        _row.onclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        _row.ondblclick = function (evt) {
            tableClickHandler(evt,sourceDataArray);
        };
        editTable.appendChild(_row); //创建行

        for (var j = 0; j < columnsArray.length;j++){
            var columnName = columnsArray[j];
            for (var objName in currentObject){
                if(columnName == objName){ //判断预定义列与读取属性是否匹配
                    _cell = document.createElement("td");
                    _cell.innerText = currentObject[objName];
                    _cell.setAttribute("class","tdclass");//设置文字超过表格列长度样式
                    _row.appendChild(_cell);
                    _cell.onmouseover = function (_cell) {
                        GetValueForToolTip(_cell);
                    };
                    _row.appendChild(_cell);
                }
            }
        }
    }
}

// 编辑 删除按钮点击事件
function editButtonsClickHander(evt,sourceDataArray){
    var currentBtn = evt.currentTarget;
    var tableName = evt.currentTarget.parentElement.parentElement.parentElement.id;
    var selectObj =  sourceDataArray[evt.currentTarget.parentElement.parentElement.rowIndex-1];
    switch (tableName){
        case "queryTable1":{
            if(currentBtn.innerHTML == "详情"){
              document.getElementById("queryReult1").style.display="none";
                document.getElementById("queryReult2").style.display="";
                document.getElementById("return").style.display="";
                document.getElementById("barcon1").style.display="none";
                document.getElementById("barcon2").style.display="";
                dyCretateTableByArray("queryTable2",selectObj.详情, ["属性","值"],["属性","值"],false);
                goPage(1, "queryTable2");
            }
            break;
        }
        case "statistics2Table":{
            if(currentBtn.innerHTML == "详情"){
                document.getElementById("statistics2").style.display = "none";
                document.getElementById("statistics3").style.display = "";
                var count=selectObj.名称+"共有"+selectObj.数量+"条数据";
                document.getElementById("statistics3Count").innerHTML=count;

                var options= document.getElementById("statistics1LayerSelect").options;

                var xmlDoc1 = xmlUtil.loadXmlFromFile("config/layerQueryName.xml");
                var layerXml = xmlDoc1.getElementsByTagName(options[options.selectedIndex].innerHTML);
                var mapNodes = layerXml[0].childNodes;
                var layerFieldname="";
                for (var i = 0; i < mapNodes.length; i++) {
                    if (xmlUtil.getNodeTagName(mapNodes[i]) == "name") {
                        layerFieldname = xmlUtil.getNodeValue(mapNodes[i])
                    }
                }

                var list=[];
                for(var i=0;i<selectObj.图形集.length;i++){
                    // selectObj.图形集[i].attributes.图形=selectObj.图形集[i]
                    // list.push(selectObj.图形集[i].attributes)

                    list.push({"名称":selectObj.图形集[i].attributes[layerFieldname],"图形":selectObj.图形集[i]})
                }
                dyCretateTableByArray("statistics3Table",list, ["名称"],["名称"],false,true);
                goPage(1, "statistics3Table");
            }
            break;
        }
        case "statistics3Table":{
            if(currentBtn.innerHTML == "详情"){
                document.getElementById("statistics3").style.display = "none";
                document.getElementById("statistics4").style.display = "";

                var list=[];
            for(var names in selectObj.图形.attributes){
                list.push({"属性":names,"值":selectObj.图形.attributes[names]})
            }
                
                dyCretateTableByArray("statistics4Table",list, ["属性","值"], ["属性","值"],false)
            }
            break;
        }
    }
}

//表格点击事件
function tableClickHandler(evt,sourceArray){
    if(evt.type == "click"){
        boolZoom = false;
    }
    else{
        boolZoom = true;
    }
    var selectObj =  sourceArray[evt.currentTarget.rowIndex-1];
    if(isEmptyValue(evt.currentTarget.parentElement) == false){
        switch (evt.currentTarget.parentElement.id){ //根据表格ID创建点击事件
            case "queryTable1":{
                m_view.popup.open({
                    features: [selectObj.几何],
                    featureMenuOpen: true,
                    updateLocationEnabled: true
                });
                break;
            }
            case "statistics3Table":{
                m_view.goTo(selectObj.图形);
                m_view.popup.open({
                    features: [selectObj.图形],
                    featureMenuOpen: true,
                    updateLocationEnabled: true
                });
                break;
            }
            case "resultListTable":{
                m_view.goTo(selectObj.几何);
                m_view.popup.open({
                    features: [selectObj.几何],
                    featureMenuOpen: true,
                    updateLocationEnabled: true,
                    dockEnabled:false
                });//dockEnabled:false 弹框在点上
                doFicker(selectObj.几何);
                break;
            }
           
        }
    }

}
function doFicker(graphic) {
    var timer;
    var timer1;
     timer1 = setInterval(function () {
             if(GraphicsLayer_fickerLayer.graphics.length>0){
                            GraphicsLayer_fickerLayer.removeAll()
             }else{
                 if(currentMapMode == "2D"){
                 graphic.symbol={
                                type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                                style: "circle",
                                color: [225,0,0],
                                size: 10
                 };
                 }else{
                     var verticalOffset = {
                         screenLength: 40,
                         maxWorldLength: 200,
                         minWorldLength: 35
                     };
                     graphic.symbol = {
                     type: "point-3d", // autocasts as new PointSymbol3D()
                     symbolLayers: [{
                         type: "icon", // autocasts as new IconSymbol3DLayer()
                         resource: {
                             primitive: "circle"
                         },
                         size: 10,
                         material: {
                             color: [225,0,0]
                         }
                     }],
                     verticalOffset: verticalOffset,
                     callout: {
                         type: "line", // autocasts as new LineCallout3D()
                         color: "white",
                         size: 2,
                         border: {
                             color:"#40C2B4"
                         }
                     }
                     };

                 }

                            GraphicsLayer_fickerLayer.add(graphic)
              }
      }, 500);
     timer = setTimeout(function () {
             clearInterval(timer1);
             GraphicsLayer_fickerLayer.removeAll()
     }, 5000);
}
function goPage(pno, tableId) {
    var itable = document.getElementById(tableId);
    var num = itable.rows.length;//表格所有行数(所有记录数)

    var totalPage = 0;//总页数
    var pageSize = 5;//每页显示行数
    //总共分几页
    if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
    } else {
        totalPage = parseInt(num / pageSize);
    }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31
    var endRow = currentPage * pageSize;//结束显示的行   40
    endRow = (endRow > num) ? num : endRow;
    //  console.log(endRow);
    //遍历显示数据实现分页
    for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
            irow.style.display = "";
        } else {
            irow.style.display = "none";
        }
    }

    var tempStr = "共" + num + "条记录 共" + totalPage + "页 当前第" + currentPage + "页<br>";
    tempStr +=' <ul class="am-pagination am-pagination-centered" >';
    if (currentPage > 1) {
        tempStr += "<li id='firstBtn' class='am-disabled' onclick=\"goPage(" + (1) + ",'" + tableId + "')\"><a >首页</a></li>";
        tempStr += "<li id='beforeBtn' class='am-disabled' onclick=\"goPage(" + (currentPage - 1) + ",'" + tableId + "')\"><a ><上一页</a></li>"
    } else {
        tempStr += "首页";
        tempStr += "<上一页";
    }

    if (currentPage < totalPage) {
        tempStr += " <li id='nextBtn' class='am-disabled'  onclick=\"goPage(" + (currentPage + 1) + ",'" + tableId + "')\"><a >下一页></a></li>";
        tempStr += " <li id='lastBtn' class='am-disabled' onclick=\"goPage(" + (totalPage) + ",'" + tableId + "')\"><a >尾页</a></li>";
    } else {
        tempStr += "下一页>";
        tempStr += "尾页";
    }
    tempStr += "</ul>";
    switch (tableId) {
        case "queryTable1":
            document.getElementById("barcon1").innerHTML = tempStr;
            break;
        case "queryTable2":
            document.getElementById("barcon2").innerHTML = tempStr;
            break;
        case "statistics3Table":
            document.getElementById("barcon3").innerHTML = tempStr;
            break;
        case "table10":
            document.getElementById("barcon10").innerHTML = tempStr;
            break;
    }

}//分页，（起始页，表id）