easyUI简单功能demo

用了easyui有一段时间了,一直没有对其功能做一个简单的记录,今天有点时间,做一下简单的记录,以备不时之需。

查询列表

<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" 那么这个模块就会在当前布局器的上边的部分显示。

当然,只完成上边的部分是不行的,还需要有一些js代码

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

说实话,不知道这么写的具体作用是啥,但是不写的话,页面就跑偏了。此外,如果gridTable的th里写了formatter="***",那么,也必须吧***对应的方法写上才能正常显示。

再加一个查询方法吧

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就是要展示的字段

删除一行列表数据

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类型的数据,最下边的三行是让页面加载之后 你原来勾选的选项就自动选中(跟我自己的业务逻辑相关的)

猜你喜欢

转载自my.oschina.net/u/3559788/blog/2878626