基于EasyUI for jQuery 解析器（Parser）实现自定义组件

EasyUI.Parser easyui parser 能将指定范围内（不指定则为引入easyui.min的doc）的dom进行解析，将class定义为easyui组件的dom进行加载。那么接下来便是之前实现的自定义查询框的工作记录。

$(function() {
    var a = $.parser.onComplete;
    $.parser.onComplete = function() {
	/**
	 * 自定义查询框
	 */
	$.each($('.customsearch'), function(index, item) {
	    $(item).removeClass("customsearch");
	    var data = JSON.parse($(item).attr("data-options"));
	    // 初始化自定义控件逻辑
	    createSearchTextBox($(item).attr('id'), data);
	});

	a();
    };
});


/**
 * 查询框
 * 
 * @param createSearchTextBox
 * @param searchid
 * @param data
 * @returns
 */
function createSearchTextBox(searchid, data) {
    $("body").append("<style>.icon-clear{visibility: hidden;}</style>");
    if (!data.datagrid && !data.loadFunction) {
	console.log('错误:没有datagrid');
	return;
    }
    var tableid = data.datagrid;
    $("#" + searchid).textbox({
			width : data.width ? parseFloat(data.width) : 300,
			hegiht : data.hegiht ? parseFloat(data.hegiht) : 30,
			prompt : data.title ? data.title : '请输入查询关键字',
			icons : [{
				    iconCls : 'icon-clear',
				    handler : function(e) {
					$(e.data.target).textbox('clear')
						.textbox('textbox').focus();
					$(this).css('visibility', 'hidden');
					if (data.loadFunction) {
					    try {
						eval(data.loadFunction + "()");
					    } catch (e) {
						console.log(e);
					    }
					} else {
					    var queryParams = $("#" + tableid).datagrid('options').queryParams;
					    if (!queryParams)
						queryParams = {};
					    queryParams.keyword = "";
					    $("#" + tableid).datagrid({
								url : $("#"+ tableid).datagrid('options').url,
								queryParams : queryParams
							});
					}
				    }
				},
				{
				    iconCls : 'icon-search',
				    handler : function(e) {
					var key = $.trim($("#" + searchid)
						.textbox("getValue"));
					if (data.loadFunction) {
					    try {
						eval(data.loadFunction + "()");
					    } catch (e) {
						console.log(e);
					    }
					} else {
					    var queryParams = $("#" + tableid).datagrid('options').queryParams;
					    if (!queryParams)
						queryParams = {};
					    queryParams.keyword = key;
					    $("#" + tableid)
						    .datagrid({
								url : $("#"+ tableid).datagrid('options').url,
								queryParams : queryParams
							});
					}
				    }
				} ],
			inputEvents : $.extend({},
				$.fn.textbox.defaults.inputEvents, {
				    keyup : function(e) {
					var t = $(this).val();
					var icon = $("#" + searchid).textbox(
						'getIcon', 0);
					if (t != null && t != "") {
					    icon.css('visibility', 'visible');
					} else {
					    icon.css('visibility', 'hidden');
					}
				    }
				})
		    });
}

demo:

<script type="text/javascript"
	src="jquery.min.js"></script>
<script type="text/javascript"
	src="tools.js"></script>
<script type="text/javascript"
	src="jquery.easyui.min.js"></script>
<body>
<input  id="search" class="customsearch"   data-options='{"datagrid":"table","title":"数据列表","width":250}'>
<table id="table" class="easyui-datagrid"  style="width: 100%; height: 100%" 
			data-options="
				url:'${Domain}api/list',
				singleSelect:true,
				method:'get',
				pagination:true,
				singleSelect:true,
				fitColumns: true,
				pageSize: 20,
				onLoadSuccess:function(){
				},
				onSelect:function(){
				}
	">
		<thead>
			<tr>
				<th data-options="field:'id',width:1,hidden:true">ID</th>
				<th data-options="field:'name',width:140">Name</th>
			</tr>
		</thead>
	</table>
</body>

来源：oschina

链接：https://my.oschina.net/u/3632223/blog/1921637

标签

jquery

easyui