基於EasyUI for jQuery 解析器（Parser）實現自定義組件

時間 2019-11-19

標籤基於 easyui jquery 解析 parser 實現自定義組件欄目 JQuery 简体版

原文原文鏈接

EasyUI.Parser easyui parser 能將指定範圍內（不指定則爲引入easyui.min的doc）的dom進行解析，將class定義爲easyui組件的dom進行加載。那麼接下來即是以前實現的自定義查詢框的工做記錄。javascript

$(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:css

<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>