管理系统表达式配置页面及js

 开发管理系统，碰到了需要配置表达式的地方。花了半天的时间把自己写的整理了一下。页面的效果是下图。

1.生成表达式

       页面是有多个table块嵌套而成的。在拼接表达式的时候可以使用回调，具体的方法实现如下：

function doaddCondition(tableId){
    var expression = '';
    var spanId =  $("#"+tableId+" td:first-child").attr("id");
    var word = $("#"+spanId+" span[class=\'show-cond-word\']").attr("name");
    var symbol = "and";
    if(word=='word1'){
        symbol = 'and';
    }else if(word='word2'){
        symbol = "or";
    }
    var condition_id = $("#"+spanId).next().attr("id");
    var condition_lenght = $("#"+condition_id).children().length;
    var cond_before_child = $("#"+condition_id+" :first-child").attr("id");
    console.log("处理该div下的第一个代码块");
    if(checkTable(cond_before_child)){
        console.log("这个块是table块");
        expression ="("+doaddCondition(cond_before_child)+")";
    }else{
        console.log("这是个div块");
        var select1 = $("#"+cond_before_child+" select[name=\'select1\']").val();
        var select2 = $("#"+cond_before_child+" select[name=\'select2\']").val();
        var text =  $("#"+cond_before_child+" input[name=\'text1\']").val();
        if(checkInfo(select1)&&checkInfo(select2)&&checkInfo(text)){
            expression =select1+select2+"'"+text+"'";
        }else{
            return false;
        }
    }
    var cond_next_child = cond_before_child;
    for(var i=0;i<condition_lenght-1;i++){
        cond_next_child = $("#"+cond_before_child).next().attr("id");
        if(checkTable(cond_next_child)){
            console.log("这个块是table块");
            expression+=symbol+"("+doaddCondition(cond_next_child)+")";
        }else{
            console.log("这是个div块");
            var select1 = $("#"+cond_next_child+" select[name=\'select1\']").val();
            var select2 = $("#"+cond_next_child+" select[name=\'select2\']").val();
            var text =  $("#"+cond_next_child+" input[name=\'text1\']").val();
            expression += symbol+select1+select2+"'"+text+"'";
        }
        cond_before_child = cond_next_child;
    }
    return expression;
}

2.解析表达式

    在编辑表达式的时候，首先要回显表达式。那么第一步就是要先解析表达式。解析的时候是一层一层解析。直到最后一层没有"()"。定义一个列表，里面的对象的内容包含：flag(expinfo--表达式内容/expList----表达式)、select1、select2、text1、list(解析的当前层的下一层的表达式)。解析过程其实就是将表达式里面的值按照指定的数据结构存储起来。具体的实现过程如下。

function anlyExpression(expression){
    console.log("要解析的规则是"+expression);
    var ruleExpList = new Object();
    var bracketList = new Array();  //所有括号集合
    for(var i=0;i<expression.length;i++){
        if(expression[i]=='('||expression[i]==')'){
            var bracket = new Object();
            bracket.exp = expression[i];
            bracket.index = i;
            bracketList.push(bracket);
        }
    }
    console.log(JSON.stringify(bracketList));
    var locaList = new Array();   //一级括号开始结束位置集合
    if(bracketList.length>0){
        var beforeVal = bracketList[0].exp;
        var beforeNum =bracketList[0].index;
        var symLength = '1';   //标志括号功能，左括号+1，右括号-1，该参数为0时表示括号闭合
        for(var j=1;j<bracketList.length;j++){
            var nowVal = bracketList[j].exp;
            var nowNum = bracketList[j].index;
            if(nowVal=="("){
                symLength++;
            }else if(nowVal==')'){
                symLength--;
            }
            if(symLength==0){
                var c = new Object();
                c.beginIndex = beforeNum;
                c.endIndex = nowNum;
                locaList.push(c);
                if((j+1)<bracketList.length){
                    beforeVal = bracketList[j+1].exp;
                    beforeNum = bracketList[j+1].index;
                }
            }
        }
    }
    console.log(JSON.stringify(locaList));
    var braketExpList = new Array();
    var lastExpre = expression;
    if(locaList!=null&&locaList.length>0){
        for(var k=(locaList.length-1);k>=0;k--){
            var express = expression;
            var braketExp = new Object();
            braketExp.exp = express.substring(locaList[k].beginIndex+1,locaList[k].endIndex);
            lastExpre = lastExpre.substring(0,locaList[k].beginIndex+1)+lastExpre.substring(locaList[k].endIndex,lastExpre.length);
            braketExpList.push(braketExp);
        }
    }
    console.log("表达式中在大括号里面的表达式列表"+JSON.stringify(braketExpList));
    console.log("去除括号里面内容的表达式"+JSON.stringify(lastExpre));
    console.log("最开始的表达式"+JSON.stringify(expression));
    var symbolitem = 'and';
    var expArray = lastExpre.split('and');
    if(expArray.length==1){
        symbolitem = 'or';
        expArray = lastExpre.split('or');
    }
    var expItemList = new Array();
    var sr = 1;
    for(var t=0;t<expArray.length;t++){
        var expItem = new Object();
        var s = expArray[t];
        if(s!='()'){
            var matchSym = inMatchSymbol(s);
            var slength = s.indexOf(matchSym);
            expItem.flag='expinfo';
            expItem.select1 = s.substring(0,slength);
            expItem.select2=matchSym.replace("&gt;",">").replace("&lt;","<");
            expItem.text1=s.substring((slength+matchSym.length+1),s.length-1);
        }else{
            expItem.flag='expList';
            var si = braketExpList.length-sr;
            expItem.list= braketExpList[si].exp;
            sr++;
        }
        expItemList.push(expItem);
    }
    ruleExpList.symbol = symbolitem;   //符号
    ruleExpList.expList = expItemList;     //表达式列表
    console.log("解析后的规则是"+JSON.stringify(ruleExpList));
    return ruleExpList;
}

3.回显表达式

    回显表达式存在回调的过程。当碰到表达式中的"()"，也就是table块时，在getDivHtml方法中调用createTableHtml方法，实现表达式的回显。

function createTableHtml(expres,tableId,divId){
    var ruleExpList = anlyExpression(expres);
    var symbol = ruleExpList.symbol;
    var spanId = tableId+"_span";
    var html = '<table id="'+tableId+'" class="am-table am-table-bordered" style="height: 60px;">' +
        '<tr>' +getSpanHtml(spanId,symbol)+
        '<td width="90%" id="'+divId+'">' + getDivHtml(ruleExpList,divId)+
        '</td>' +
        '<td width="5%">' +
        '<span class="am-icon-trash" style="color: red;" onclick="removeCond(\''+tableId+'\')" title="移除条件组"></span><br/>\n' +
        '<span class="am-icon-plus" onclick="addCond(\''+divId+'\')" title="添加条件"></span><br/>' +
        '<span class="am-icon-plus-circle" onclick="addConds(\''+divId+'\')" title="添加条件组"></span>' +
        '</td>' +
        '</tr>' +
        '</table>';
    return html;
}

function getDivHtml(ruleExpList,parentId){
    var expList = ruleExpList.expList;
    var html='';
    for(var i=0;i<expList.length;i++){
        var divId =parentId+"_"+(i+1);
        var tableId =parentId+"_table"+(i+1);
        var flag = expList[i].flag;
        if(flag=='expinfo'){
            html += '<div id="'+divId+'" class="am-form am-form-inline bottom-in">' +
                '<div class="am-form-group cond1-select">' + getSelectHtml('select1',expList[i].select1)+
                '</div>' +
                '<div class="am-form-group cond2-select" >' + getSelectHtml('select2',expList[i].select2)+
                '</div>' +
                '<div class="am-form-group cond1-select">' + getSelectHtml('text1',expList[i].text1)+
                '</div>' +
                '<div class="am-form-group">' +
                '<span class="am-icon-close" style="color: red" onclick="removeCond(\''+divId+'\')"></span>' +
                '</div>' +
                '</div>';
        }else if(flag=='expList'){
            html+=createTableHtml(expList[i].list,tableId,divId);
        }
    }
    return html;
}