文档章节

easyUI简单功能demo

卖星星的小矮人
 卖星星的小矮人
发布于 2018/11/20 11:15
字数 644
阅读 11
收藏 0

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

© 著作权归作者所有

卖星星的小矮人
粉丝 2
博文 33
码字总数 31955
作品 0
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
展示页面用easyui会有问题吗

刚才简单试了一下,在easyui里用了bootstrap,问题百出。是不是easyui的组件一般不和这些css框架一起用? 我是小白,对这个不大懂。 比如,easyui的select可以用url直接从服务器端接受数据,...

plugin
2014/09/21
588
7
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
0
0
EasyUI的功能树之异步树

最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互...

易水寒丶开源
2015/11/17
0
1

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 Java语法教程 编写Java源代码

现在我们来一步一步的编写第一个Java程序,鼎鼎大名的“HelloWorld”。 编写Java源代码 编写Java源代码可以使用任何无格式的文本编辑器,在Windows操作系统上可以使用记事本、Edit Plus等程序...

老码农的一亩三分地
17分钟前
2
0
JavaScript箭头函数中的this详解

前言 箭头函数极大地简化了this的取值规则。 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () {console.log("Hello, Fundebug!");} 箭头函数指的是用...

开元中国2015
28分钟前
2
0
ETL测试工具简介

ETL测试 ETL测试过程与其他测试过程类似,包括一些阶段。 确定业务需求 测试计划 设计测试用例和测试数据 测试执行和错误报告 总结报告 测试结束 ETL测试的类型 生产验证测试: 也称为表平衡...

python测试开发人工智能安全
40分钟前
1
0
OSChina 周四乱弹 —— 不能空腹吃早餐

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :#今日歌曲推荐# 很好听的钢琴曲,节奏简单,有一点伤感。分享Fabrizio Paterlini的单曲《Veloma》: 《Veloma》- Fabrizio Paterlini ...

小小编辑
今天
1K
14
探讨android更新UI的几种方法

作为IT新手,总以为只要有时间,有精力,什么东西都能做出来。这种念头我也有过,但很快就熄灭了,因为现实是残酷的,就算一开始的时间和精力非常充足,也会随着项目的推进而逐步消磨殆尽。我...

天王盖地虎626
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部