easyui动态组件添加和删除

1、定义目标位置

   <div id="btnDiv"></div>

2、添加动态组件

function addItems(){
var conditionDiv = '<div class="itemsDiv">'
+' <span style="width:40px">监控项：</span>'
+' <select class="easyui-combobox item" name="item" data-options="editable:false"  onchange="sele_Change()">'
+' <option value="">请选择...</option>'
+' <option value="FAIL_COUNT_DAY">日异常量</option>'
+' <option value="FAIL_COUNT_H">小时异常量</option>'
+' <option value="FAIL_RATIO">异常率</option>'
+' <option value="AVG">分钟平均响应时间</option>'
+' <option value="COUNT">分钟调用量</option>'
+' </select>'
+' <span class="computatRule_span" style="width:40px">规则：</span>'
+' <select class="easyui-combobox computatRule" name="computatRule" data-options="editable:false">'
+' <option value="">请选择...</option>'
+' <option value="FluAscPerBaseOn1Day">同比波动百分比</option>'
+' <option value="Absolute">绝对值</option>'
+' </select>'
+' <span style="width:40px">阀值：</span>'
+' <input class="easyui-textbox threshold"  name="threshold" style="width:50px">'
+'<button class="easyui-linkbutton" data-options="iconCls:\'icon-remove\'" style="font-size:12px"  onclick="removeConditionRule()">remove</button>' 
+'</div>';

   var target = $('#btnDiv').before(conditionDiv);
   $.parser.parse(target);

};

3、动态组件删除

function removeConditionRule(){

        //通过按钮控制删除

        $(event.target).parent().remove();

      //整个删除

     //$('.itemsDiv').remove();

}

4、动态组件取值

function getItemsValue(){

      var itemsValue=[];

       $('.itemsDiv').each(function(){

            var outCom = $(this);

                var itemCom = outCom.find($(".item"));

                var computatRuleCom = outCom.find($(".computatRule"));

                var thresholdCom = outCom.find($(".threshold"));

               var valObj = {

                        "item":itemCom .val(),

                        "computatRule":computatRuleCom .val(),

                        "threshold":thresholdCom .val();

            }

            itemsValue.push(valObj);

       });

}