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