dynamicParameterTree.js

// 右侧的属性表格
var pGridObj;
//当前选中的节点
var selectedNode;
//用于保存已修改的参数集合,在重新加载参数树及提交成功后清空
var changedKeyValues = new Array();
//当前选中的行
var currentRowIndex = null;

var isDebug = false;

// 属性树的列定义
var myColumns = [[
    { field: "name", title: "参数名", width: 100 },
    { field: "value", title: "值", width: 150, formatter: parameterValueFormatter, styler: parameterStyleFormatter },
    { field: "info", title: "说明", width: 150 }
]];

$().ready(function () {
    pGridObj = $("#pgrid");
    // 加载XML参数，并显示树状结构
    loadParameterXml(showParameterTree);
    // 保存参数
    $("#saveAllChanged").click(submitAllChanges);
});

//加载参数树
function loadParameterXml(onloadSuccessCallback) {
    var url = "/do/trafficController/configVal?t=" + new Date().getTime();
    var dataUrl = "/do/trafficController/configKey?t=" + new Date().getTime();
    if (isDebug) {
        url = "xml/VasconfigInfo.xml";
        dataUrl = "xml/VasconfigVal.xml";
    }

    $.get(url, null, function (xml) {
        //解释XML
        var xmlDoc;
        try {
            xmlDoc = $.parseXML(xml);
        } catch (e) {
            $.messager.alert("错误", "解释参数XML错误!(XML格式不正确)", "error");
            return;
        }
        //加载存储设置值的XML
        $.ajax(dataUrl, {
            async: true,
            dataType: "text",
            error: function (jqXHR, status, error) {
                $.messager.alert("错误", "获取参数值XML出错!", "error");
            },
            success: function (data, status, jqXHR) {
                try {
                    var valueXml = $.parseXML(data);
                } catch (e) {
                    $.messager.alert("错误", "解释参数XML错误!(XML格式不正确)", "error");
                    return;
                }
                if (onloadSuccessCallback) {
                    onloadSuccessCallback(xmlDoc, valueXml);
                }
            }
        });
    }, "text");
}
/**
 * 显示参数树
 * @param {XmlDocument} xmlDoc 
 * @param {XmlDocument} valueXml 
 */
function showParameterTree(xmlDoc, valueXml) {
    var jsonData = convertXmlToJson(xmlDoc, valueXml);
    $("#ptree").tree("loadData", jsonData);
}

//参数值格式化函数
function parameterValueFormatter(value, row, index) {
    var valueType = row.type;
    switch (valueType) {
        case "3":
            var data = row.editor.options.data;
            for (var i = 0; i < data.length; i++) {
                if (data[i].id == value)
                    return data[i].text;
            }
            return value;
        //布尔型，1->开启,0->关闭
        case "4":
            return value == "1" ? "是" : "否";
        default:
            return value;
    }
}

function parameterStyleFormatter(value, row, index) {
    var valueType = row.type;
    switch (valueType) {
        //布尔型，1->显示为绿色,0->显示为红色
        case "4":
            return value == "1" ? "color:green" : "color:red";
        default:
            return "";
    }
}

function clickTreeNode(node) {
    selectedNode = node;//保存当前选中的节点
    if (node.gridData) {
        pGridObj.propertygrid("loadData", node.gridData);
    }
}

//结果编辑参数
function onEndEditParameter(index, row, changes) {
    if (changes && changes.value != null && changes.value != undefined) {
        if (window.console) {
            console.log(selectedNode.attr.path + "/" + row.name + "=" + changes.value);
        }
        var key = selectedNode.attr.path + "/" + row.name + "#" + row.type;
        //替换'/'为'\\'
        key = key.replace(/\//g, "\\");
        changedKeyValues[key] = changes.value;//保存参数
    }
}

//点击属性表格行
function onClickPropertyRow(index, row) {
    currentRowIndex = index;
    //开始编辑表格
    $("#pgrid").propertygrid("beginEdit", index);
}
//提交所有的修改
function submitAllChanges() {
    if (currentRowIndex) {
        $("#pgrid").propertygrid("unselectRow", currentRowIndex);
    }
    setTimeout(submitAllChangesToServer, 200);
}
//提交修改到服务器
function submitAllChangesToServer() {
    var dataString = "";

    for (var key in changedKeyValues) {
        if (dataString.length > 0)
            dataString = dataString + "&" + encodeURIComponent(key) + "=" + changedKeyValues[key];
        else
            dataString = dataString + encodeURIComponent(key) + "=" + changedKeyValues[key];
    }
    if (dataString.length == 0) {
        $.messager.alert("提示", "无需要保存的修改！", "info");
        return;
    }
    //添加securityToken
    var securityToken = document.getElementsByName("-xsrf-");
    if (securityToken.length > 0) {
        dataString += "&-xsrf-=" + securityToken[0].value;
    } else {
        alert("securityToken为空！不能提交!");
        return;
    }
    //提交到后台接口进行保存
    //            var saveParameterUrl = "/settings/advanced/save";
    var saveParameterUrl = "/do/trafficController/saveConfig";
    $.post(saveParameterUrl, dataString, function (data) {
        if (!data.error) {
            $.messager.alert("结果", "保存失败!原因:" + data.feedback.Msg, "error");
        } else {
            $.messager.alert("结果", "保存成功!", "info");
            //保存成功，清空上次修改的参数
            changedKeyValues = new Array();
        }
    }, "json");
}

//解释参数树为Tree组件要求的Json格式
function convertXmlToJson(xml, xmlValue) {
    var jsonData = [];
    //如果XMl的节点不为空
    var rootNode = $(xml).find("root");
    if (rootNode.length > 0) {
        var idgetter = getIdGetter();
        var treeNode = convertToTreeNode(rootNode[0], idgetter, "");
        bindXmlNodeToTreeNode(treeNode, rootNode[0], idgetter, xmlValue);
        //添加到Json数据
        jsonData = treeNode.children;
    }
    return jsonData;
}

//用于获取累加的树结点Id
function getIdGetter() {
    var id = 1;
    return function () {
        return id++;
    };
}
//绑定Xml结点到Tree结点
function bindXmlNodeToTreeNode(parentTreeNode, xmlNode, idGetter, valueXml) {
    var childNodes = getXmlChildNodes(xmlNode);
    for (var i = 0; i < childNodes.length; i++) {
        var currentNode = childNodes[i];

        //判断结点是否是叶节点（把属于右侧的参数拆分出去）
        var isEndNode = isEndNodeFun(currentNode);
        var treeNode;//当前节点对应的TreeNode
        if (isEndNode) {
            //把子节点格式化为propertiesGrid的Json格式
            var nodePath = parentTreeNode.attr.path + "/" + currentNode.nodeName;
            parentTreeNode.addGridData(getGridData(currentNode, valueXml, nodePath));
        } else {
            treeNode = convertToTreeNode(currentNode, idGetter, parentTreeNode.attr.path);
            //循环添加所有的子节点
            bindXmlNodeToTreeNode(treeNode, currentNode, idGetter, valueXml);
            parentTreeNode.children.push(treeNode);
        }
    }
}

//转换为PropertyGrid需要的格式
function getGridData(currentNode, valueXml, nodePath) {
    var childNodes = getXmlChildNodes(currentNode);

    var pType = childNodes[0].text ? childNodes[0].text : childNodes[0].textContent;
    var pInfo = childNodes[1].text ? childNodes[1].text : childNodes[1].textContent;
    var pDefault = childNodes[2].text ? childNodes[2].text : childNodes[2].textContent;
    var pValue = getValueFromValueXml(valueXml, nodePath);
    //对数值进行格式化
    pDefault = getValidateValue(pType, pDefault);
    pValue = getValidateValue(pType, pValue);

    pValue = pValue ? pValue : pDefault;//如果当前节点的值没有改变，则取默认值
    var pRange = childNodes[3].text ? childNodes[3].text : childNodes[3].textContent;

    return {
        name: currentNode.nodeName,
        value: pValue,
        defaultValue: pDefault,
        type: pType,
        info: pInfo,
        group: "default",
        editor: getEditor(pType, pRange)
    };
}

//从另一个值Xml中获取已经改变的值
function getValueFromValueXml(valueXml, nodePath) {
    //使用遍历的方式去查找元素
    var isFound = true;
    var nodes = nodePath.split("/");
    var tempNode = valueXml;
    for (var i = 0; i < nodes.length; i++) {
        tempNode = getDirectChildByTagName(tempNode, nodes[i]);
        if (!tempNode) {
            isFound = false;
            break;
        }
    }
    if (isFound)
        return tempNode.text ? tempNode.text : tempNode.textContent;
    else
        return null;
}

//根据节点的类型，返回合适的编辑器
/*
    pType:
        0 - Int
        1 - Float
        2 - String
        3 - Enum   枚举值在 Range字段内
        4 - Boolean
        5 - Time
        6 - Undefined
*/
function getEditor(pType, pRange) {
    var editor = {
        type: null,
        options: {}
    };
    //最小值，最大值
    var min = null;
    var max = null;
    if (pRange) {
        var rangePart = getNumRange(pRange);
        min = rangePart[0];
        max = rangePart[1];
    }
    switch (pType) {
        case "0":
            editor.type = "numberspinner";
            if (min)
                editor.options.min = parseInt(min);
            if (max)
                editor.options.max = parseInt(max);
            break;
        case "1":
            editor.type = "numberbox";
            if (min)
                editor.options.min = parseFloat(min);
            if (max)
                editor.options.max = parseFloat(max);
            editor.options.precision = 4;//浮点数默认4位小数
            break;
        case "3":
            //枚举类型
            editor.type = "combobox";
            editor.options = {
                valueField: "id",
                textField: "text",
                data: getComboboxData(pRange)
            };
            break;
        case "4":
            editor.type = "checkbox";
            editor.options.on = 1;
            editor.options.off = 0;
            break;
        case "5":
            editor.type = "my97";
            editor.options = getTimeOptions(pRange);
            break;
        case "2":
        case "6":
        default:
            editor.type = "text";
            break;
    }
    return editor;

    function getComboboxData(pRangeString) {
        var enumRegex = /(-?\d+)-(([0-9a-zA-Z\u4e00-\u9faf]+)(&amp;)?)?/g;//枚举类型的正则表达式
        var comboboxData = [];
        var match = enumRegex.exec(pRangeString);
        while (match != null) {
            comboboxData.push({
                id: match[1],
                text: match.length >= 4 ? match[3] : ""
            });
            match = enumRegex.exec(pRangeString);
        }
        return comboboxData;
    }

    function getNumRange(pRangeString) {
        var numRangeRegex = /(-?([0-9]+\.)?[0-9]*)-(([0-9]+\.)?[0-9]*)/g; // 数字范围类型的正则表达式
        var data = [];
        var match = numRangeRegex.exec(pRangeString);
        if (match != null) {
            data.push(match[1]);
            data.push(match[3]);
        }
        return data;
    }

    function getTimeOptions(pRangeString) {
        var options = {};
        var timeRangeParts;
        if (pRange) {
            timeRangeParts = pRangeString.split("-");
            if (timeRangeParts.length == 2) {
                options.maxDate = timeRangeParts[0].split(":")[1].replace(/_/g, ":");
                options.minDate = timeRangeParts[1].split(":")[1].replace(/_/g, ":");
                options.dateFmt = "HH:mm:ss";
            }
        }
        return options;
    }
}

//格式Xml中的值为合法的格式
function getValidateValue(type, value) {
    if (value) {
        switch (type) {
            case "5":
                value = value.split(":")[1].replace(/_/g, ":");
                break;
            default:
        }
    }
    return value;
}

//是否是参数树的叶节点
function isEndNodeFun(currentNode) {
    var childNodes = getXmlChildNodes(currentNode);

    if (currentNode && childNodes && childNodes.length > 0
        && childNodes[0].nodeName == "AttribType") {
        return true;
    } else {
        return false;
    }
}
//获取直系子节点
function getDirectChildByTagName(node, tagName) {
    var nodes = getXmlChildNodes(node);
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].nodeName == tagName)
            return nodes[i];
    }
    return null;
}
//获取XML节点的子节点列表，兼容IE及非IE
function getXmlChildNodes(xmlNode) {
    //IE下是childNodes,非IE下是children
    if (xmlNode.childNodes) {
        var currentNode;
        //遍历所有的子节点
        var validateNodeArray = new Array();
        for (var i = 0; i < xmlNode.childNodes.length; i++) {
            currentNode = xmlNode.childNodes[i];
            if (currentNode.nodeName == "#text") {
                continue;
            }
            validateNodeArray.push(currentNode);
        }
        return validateNodeArray;
    } else {
        return xmlNode.children;
    }
}
//把一个XMl结点转为TreeNode
function convertToTreeNode(xmlNode, idGetter, parentName) {
    return {
        id: idGetter(),
        text: xmlNode.nodeName,
        children: [],
        attr: {
            path: function () {
                if (parentName)
                    return parentName + "/" + xmlNode.nodeName; //保存根节点到当前节点的路径
                else {
                    return xmlNode.nodeName;
                }
            }()
        },
        gridData: {
            total: 0,
            rows: []
        },
        addGridData: function (data) {
            this.gridData.total++;
            this.gridData.rows.push(data);
        }
    };
}