Jquery自定义搜索插件

leidc 2021-09-01 原文

根据已经写好的布局给出一个端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>