学习笔记 – EasyUI官方网站演示

学习笔记 – EasyUI官方网站演示EasyUI官方网站演示撰写:2016/03/21更新:2016/04/07博客地址:http://www.cnblogs.com/gibbonnet/p/5362801.html演示地址:h

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

EasyUI官方网站演示

撰写:2016/03/21
更新:2016/04/07
博客地址:http://www.cnblogs.com/gibbonnet/p/5362801.html
演示地址:http://www.jeasyui.com/tutorial/index.php

应用程序示例

使用jQuery EasyUI创建CURD应用)

  • datagrid class="easyui-datagrid"
  • dialog class="easyui-dialog"
  • form
  • messager $.messager.show

创建可以编辑的表格

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
指定列的编辑器
editor="{type:'validatebox',options:{required:true}}"
指定载入数据、保存、更新、删除操作的服务器路径

$('#dg').edatagrid({
    url: 'get_users.php',
    saveUrl: 'save_user.php',
    updateUrl: 'update_user.php',
    destroyUrl: 'destroy_user.php'
});

创建RSS阅读器

  • layout 布局器 class="easyui-layout"
  • datagrid 表格 $('#dg').datagrid
  • tree 树 $('#t-channels').tree

布局器

region="north" border="false"
region="west"
region="center"

表格事件

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

onSelect 选择事件
onLoadSuccess 数据载入成功后事件

树演示 TreeGrid

演示地址:http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=

基本使用

<table title="Fluid Browser" class="easyui-treegrid" style="width:700px;height:250px"
       data-options="
                     url: 'treegrid_data1.json',
                     method: 'get',
                     idField: 'id',
                     treeField: 'name'
                     ">
<thead>
  <tr>
    <th data-options="field:'name'" width="50%">Name(50%)</th>
    <th data-options="field:'size'" width="20%" align="right">Size(20%)</th>
    <th data-options="field:'date'" width="30%">Modified Date(30%)</th>
  </tr>
</thead>
</table>

增加连线 lines: true

显示合计行 showFooter:true

表格动作

允许折叠 collapsible: true,

全部折叠 $('#tg').treegrid('collapseAll');

全部展开 $('#tg').treegrid('collapseAll');

展开到指定节点 $('#tg').treegrid('expandTo',21).treegrid('select',21);

复选框

属性设置 checkbox: true,

定制复选框

checkbox: function(row){
	var names = ['Java','eclipse.exe','eclipse.ini'];
	if ($.inArray(row.name, names)>=0){
		return true;
	}
}

上下文菜单

属性:onContextMenu: onContextMenu

显示菜单

function onContextMenu(e,row){
	if (row){
		e.preventDefault();
		$(this).treegrid('select', row.id);
		$('#mm').menu('show',{
			left: e.pageX,
			top: e.pageY
		});                
	}
}

定义菜单

<div id="mm" class="easyui-menu" style="width:120px;">
  <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
  <div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
  <div class="menu-sep"></div>
  <div onclick="collapse()">Collapse</div>
  <div onclick="expand()">Expand</div>
</div>

定义动作

function removeIt(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('remove', node.id);
	}
}
function collapse(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('collapse', node.id);
	}
}
function expand(){
	var node = $('#tg').treegrid('getSelected');
	if (node){
		$('#tg').treegrid('expand', node.id);
	}
}

可编辑表格

开始编辑

var row = $('#tg').treegrid('getSelected');
editingId = row.id
$('#tg').treegrid('beginEdit', editingId);

结束编辑

$('#tg').treegrid('beginEdit', editingId);

取消编辑

$('#tg').treegrid('cancelEdit', editingId);

复杂的表格

合并列,合并行

<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:700px;height:250px"
		data-options="
			url: 'treegrid_data3.json',
			method: 'get',
			rownumbers: true,
			showFooter: true,
			idField: 'id',
			treeField: 'region'
		">
	<thead frozen="true">
		<tr>
			<th field="region" width="200">Region</th>
		</tr>
	</thead>
	<thead>
		<tr>
			<th colspan="4">2009</th>
			<th colspan="4">2010</th>
		</tr>
		<tr>
			<th field="f1" width="60" align="right">1st qrt.</th>
			<th field="f2" width="60" align="right">2st qrt.</th>
			<th field="f3" width="60" align="right">3st qrt.</th>
			<th field="f4" width="60" align="right">4st qrt.</th>
			<th field="f5" width="60" align="right">1st qrt.</th>
			<th field="f6" width="60" align="right">2st qrt.</th>
			<th field="f7" width="60" align="right">3st qrt.</th>
			<th field="f8" width="60" align="right">4st qrt.</th>
		</tr>
	</thead>
</table>

参考文档

http://www.jeasyui.com/documentation/index.php#

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166735.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Pytorch-DataLoader的使用

    Pytorch-DataLoader的使用原文连接:http://chenhao.space/post/d313d236.htmlpytorch-DataLoader的使用importtorchimporttorch.utils.dataasData#[1,1,1]相当于一句话的wordembedding,这个tensor中含有三句话x=torch.tensor([[1,1,1],[2,2,2…

  • 多合一OEM Win7系统盘制作

    多合一OEM Win7系统盘制作准备工具:imageX工具imagex_16385_x86.rar(511.88KB,下载次数:718)2009-10-2211:13上传下载次数:718下载积分:PB币-1UltraISO(下载自己找吧)素材:原版Windows7Ultimate简体中文32位系统ISO一个(下载自己找吧)原版Windows7Ultim…

  • mybatiscodehelperpro官网_Mybatis框架

    mybatiscodehelperpro官网_Mybatis框架一.环境准备1.下载MybatisCodeHelperPro方式有两种,一种是离线安装,网址:SearchResults|JetBrainsMarketplace,注意下载时的版本要与idea版本契合,一种是通过idea的插件市场下载,由于我很少能够打开插件市场,并且不容易激活成功教程,而且老师发了现成的,所以我选择第一种。2.安装选择压缩包(不用解压),点击OK,重启idea并激活插件3.激活成功教程进去之后会让你激活,点一下,或者激活码只要不是重复的,随…

  • String数组初始化

    String数组初始化在java中,声明一个数组时,不能直接限定数组长度,只有在创建实例化对象时,才能对给定数组长度.。如下,1,2,3可以通过编译,4,5不行。而String是Object的子类,所以上述BCF均可定义一个存放50个String类型对象的数组。1.Stringa[]=newString[50];2.Stringb[];3.charc[];4.Stringd[50];5.char…

  • C#Random()函数详解「建议收藏」

    C#Random()函数详解「建议收藏」随机数的使用很普遍,可用它随机显示图片,用它防止无聊的人在论坛灌水还可以用来加密信息等等。本文讨论如何在一段数字区间内随机生成若干个互不相同的随机数,比如在从1到20间随机生成6个互不相同的整数,并通过此文介绍Visualc#中随机数的用法。.net.Frameword中提供了一个专门产生随机数的类System.Random,此类默认情况下已被导入,编程过程中可以直接使用。我们知道,计算机并不…

  • 2018——2019 20165239Exp9 Web安全基础

    2018——2019 20165239Exp9 Web安全基础

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号