使用easyui动态添加查询条件

上周的一个项目需求就是根据用户的实际需求来增加查询条件。在这里和大家分享一下自己琢磨了两个小时才写出来的一个小demo（没有很大的技术含量）.希望对大家有用。

  <tr>

                    <td>更多条件
                        <input id="addtd" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'传真'},{'value':'2','text':'联系电话'},{'value':'3','text':'委托人'},{'value':'4',text:'同行编号'},{'value':'5',text:'报价'},{'value':'6',text:'销售'}]" /></td>
                    <td>
                        <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSerach" name="btnSerach" style="display: inline-block"
                            οnclick="javascript:SearchSchoolAreesInfo();">查询</a></td>
                </tr>

上述代码就是页面上的，通过使用EasyUI的combox来获取查询条件，为了简单明了，我将json数据源直接写在了页面上。

下边就是js代码部分。主要代码思路就是通过获取下拉框的内容来判断选中的值，以此来在页面上增加对应的inupt文本框。具体代码如下：

  function addsearch() {
        $('#addtd').combobox({
            onChange: function (n, o) {
                var len = $("#appendtr").children().length;
                if (parseInt(len) < parseInt(10)) {
                    if (n == 1) {
                        var obj = $(".fax");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='fax'>传真：</td><td><input type='text' /></td>")
                        }
                        else {
                            $.messager.alert('友情提示', '请不要重复添加哦！');
                        }
                    }
                    if (n == 2) {
                        var obj = $(".phone");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='phone'>联系电话：</td><td><input type='text' /></td>")
                        }
                        else {
                            $.messager.alert('友情提示', '请不要重复添加哦！');
                        }
                    }
                    if (n == 3) {
                        alert(3);
                        var obj = $(".client");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='client'>委托人：</td><td><input type='text' /></td>")
                        }
                        else {
                            $.messager.alert('友情提示', '请不要重复添加哦！');
                        }
                    }
                    if (n == 4) {
                        alert(4);
                        var obj = $(".peernumber");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='peernumber'>同行编号：</td><td><input type='text' name='peernumber' /></td>")
                        }
                        else {
                            $.messager.alert('友情提示', '请不要重复添加哦！');
                        }
                    }
                    if (n == 5) {
                        var obj = $(".price");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='price'>报价：</td><td><input type='text' /></td>");
                        }
                    }
                    if (n == 6) {
                        var obj = $(".saler");
                        if (obj.html() == undefined) {
                            $("#appendtr").append("<td class='saler'>销售：</td><td><input type='text' /></td>");
                        }
                    }
                }
                else if (parseInt(len) >= parseInt(10) && parseInt(len) < parseInt(20)) {
                    //超过内容要进行换行
                    var appended = $(".appended").html();
                    if (appended == undefined) {
                        $("#searchtable").append("<tr class='appended'></tr>")
                        if (n == 1) {
                            var obj = $(".fax");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='fax'>传真：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 2) {
                            var obj = $(".phone");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='phone'>联系电话：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 3) {
                            var obj = $(".client");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='client'>委托人：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 4) {
                            var obj = $(".peernumber");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='peernumber'>同行编号：</td><td><input type='text' name='peernumber' /></td>")
                            }

                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 5) {
                            var obj = $(".price");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='price'>报价：</td><td><input type='text' /></td>");
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 6) {
                            var obj = $(".saler");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='saler'>销售：</td><td><input type='text' /></td>");
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                    }
                    else {
                        if (n == 1) {
                            var obj = $(".fax");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='fax'>传真：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 2) {
                            var obj = $(".phone");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='phone'>联系电话：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 3) {
                            var obj = $(".client");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='client'>委托人：</td><td><input type='text' /></td>")
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 4) {
                            var obj = $(".peernumber");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='peernumber'>同行编号：</td><td><input type='text' name='peernumber' /></td>")
                            }

                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 5) {
                            var obj = $(".price");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='price'>报价：</td><td><input type='text' /></td>");
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                        if (n == 6) {
                            var obj = $(".saler");
                            if (obj.html() == undefined) {
                                $(".appended").append("<td class='saler'>销售：</td><td><input type='text' /></td>");
                            }
                            else {
                                $.messager.alert('友情提示', '请不要重复添加哦！');
                            }
                        }
                    }
                }
            }
        });
    }

由于代码比较简单，这里我就不再一一叙述了。具体效果图如下： 这里我知道有很大的优化空间，如果你有什么意见和建议请在下留言哦