開發管理系統，碰到了需要配置表示式的地方。花了半天的時間把自己寫的整理了一下。頁面的效果是下圖。

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;
}