管理系统表达式配置页面及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

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;i0){
        var beforeVal = bracketList[0].exp;
        var beforeNum =bracketList[0].index;
        var symLength = '1';   //标志括号功能，左括号+1，右括号-1，该参数为0时表示括号闭合
        for(var j=1;j0){
        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").replace("<","<");
            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 = '' +
        '' +getSpanHtml(spanId,symbol)+
        '' +
        '' +
        '' +
        '
' + getDivHtml(ruleExpList,divId)+
        '
' +
        '
\n' +
        '
' +
        '' +
        '
';
    return html;
}

function getDivHtml(ruleExpList,parentId){
    var expList = ruleExpList.expList;
    var html='';
    for(var i=0;i' +
                '
' + getSelectHtml('select1',expList[i].select1)+
                '
' +
                '
' + getSelectHtml('select2',expList[i].select2)+
                '
' +
                '
' + getSelectHtml('text1',expList[i].text1)+
                '
' +
                '
' +
                '' +
                '
' +
                '

'; }else if(flag=='expList'){ html+=createTableHtml(expList[i].list,tableId,divId); } } return html; }