Jquery自定义搜索插件

根据已经写好的布局 给出一个端json值然后生成页面的查询部门

例如:

	$("#MySearch").jsearch({
				data: [
				   {Name: "标题", Id: "txt_Title", Type: "text" },
				   { Name: "状态", Id: "txt_State", Type: "Select", Value: [{ Value: 0, Text: "全部" }, { Value: 1, Text: "正常" }, { Value: 2, Text: "停用"}] },
				   { Name: "标题1", Id: "txt_Title2", Type: "text" },
				   { Name: "日期", Id:   "txt_Time", Type: "text" },
				   { Name: "状态2", Id: "txt_State1", Type: "Select", Value: [{ Value: 0, Text: "全部" }, { Value: 1, Text: "正常" }, { Value: 2, Text: "停用"}] },
					]
			});
那么生成的结果如图所示：

 

前端页面和js：

View Code

<div id="MySearch">

</div>

<script type="text/javascript">
        $(function () {
            $("#MySearch").jsearch({
                data: [
                   {Name: "标题", Id: "txt_Title", Type: "text" },
                   { Name: "状态", Id: "txt_State", Type: "Select", Value: [{ Value: 0, Text: "全部" }, { Value: 1, Text: "正常" }, { Value: 2, Text: "停用"}] },
                   { Name: "标题1", Id: "txt_Title2", Type: "text" },
                   { Name: "日期", Id:   "txt_Time", Type: "text" },
                   { Name: "状态2", Id: "txt_State1", Type: "Select", Value: [{ Value: 0, Text: "全部" }, { Value: 1, Text: "正常" }, { Value: 2, Text: "停用"}] },
                    ]
            });
        });
    </script>

 

然后引用jquery.ui.plugins.jsearch.js就可以了(jquery.ui.plugins.jsearch.js自己封装的)

 

 

 

转载于:https://www.cnblogs.com/leidc/archive/2012/04/12/2444360.html