easyUI簡單功能demo

時間 2019-12-11

標籤 easyui 簡單功能 demo 简体版

原文原文鏈接

用了easyui有一段時間了，一直沒有對其功能作一個簡單的記錄，今天有點時間，作一下簡單的記錄，以備不時之需。javascript

查詢列表

<body  class="easyui-layout" style="padding:5px;left: 0px; top: 4px; "> 
<div region="center" style="overflow:hidden;background:#fafafa; border:1px">
                
        <!-------------------------------詳細信息展現表格----------------------------------->
       
        <table id="dataGrid" title="網格員列表"  pageSize=20
                toolbar="#toolbarCustomer" pagination="true"  
                rownumbers="true" striped="true" fitColumns="true"  fit="true" singleSelect="true">  
            <thead>  
                <tr>
                	<th data-options="field:'gridLevel',width:20" formatter="formatLevel">網格級別</th>  
                    <th data-options="field:'name',width:20">網格名稱</th>  

                    <th data-options="field:'status',width:20" formatter="formatStatus">狀態</th> 
                </tr>  
            </thead>  
        </table>  
    </div>
</div>

展現列表信息的table 放在了一個div中，region="center" 這個是必須有的一個容器，可是這個容器不必定放的是展現列表，不過習慣上‘’列表展現‘’就放在這個容器中。此外，除了region="center" 還有region="north"，region="south"，region="east"，region="west"，其實這個是跟easyui的佈局器一塊兒使用的，上北下南左西右東，好比region="north" 那麼這個模塊就會在當前佈局器的上邊的部分顯示。html

固然，只完成上邊的部分是不行的，還須要有一些js代碼java

$(function(){
	$("#dataGrid").datagrid({idField: 'id'});
});

說實話，不知道這麼寫的具體做用是啥，可是不寫的話，頁面就跑偏了。此外，若是gridTable的th裏寫了formatter="***"，那麼，也必須吧***對應的方法寫上才能正常顯示。json

再加一個查詢方法吧佈局

function bindSearchEvent(){
		$("#dataGrid").datagrid('options').url = "${ctx}/keyItem/dataGrid";
		var name = $("#name").val().replace(/\s+/g,"");
		
	    var params = {
	    		'name':name
	    };
	    $("#dataGrid").datagrid({idField: 'id', queryParams: params});
	    $("#dataGrid").datagrid('clearSelections');
	}

插入一行列表數據

$('#dataGrid3').datagrid('insertRow',{
					index: i,	// 索引從0開始
					row: {
						seq : i,
						name: name,
						type: type,
						path:path
					}
				});

seq、name、type、path都是對應的要展現的字段，好比<th data-options="field:'name',width:20">網格名稱</th> 中的field:'name'，這個name就是要展現的字段ui

刪除一行列表數據

var index = $('#dataGrid3').datagrid('getRowIndex', $("#dataGrid3").datagrid('getSelected'));
$("#dataGrid3").datagrid("deleteRow",index);

建立一個下拉樹

$('#checkType').combotree({
  url: '${ctx}/gridman/checkType',
  multiple: true,
     required: true
 });
 
 var checkType = '${obj.checkType}';//獲取全部要選中的id
 var c = checkType.split(",");
  
 $("#checkType").combotree('setValues',c); //設置選中

請求的url返回json類型的數據，最下邊的三行是讓頁面加載以後你原來勾選的選項就自動選中（跟我本身的業務邏輯相關的）url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。