EasyUI 学习笔记

合集下载

EasyUI学习心得[原创]

EasyUI学习心得[原创]学习了几天EasyUI，很多事情都要自己试过才知道，小问题会浪费很多时间。

所以，就在此记录一下，随时更新。

一、引号EasyUI的自定义关键字的识别，API文档语焉不详。

摸了很久才明白。

基本规律就是：1. 在HTML中直接定义时，大部分必须加引号，包括自定义函数名。

但布尔值、数字例外。

2.在js中给出定义时，只有字符串类型的需要加引号，仅供EasyUI识别的字符串类型的关键字也要加引号，比如“center”。

例1：< input="" class='easyui-combobox' id='ddlAccount'>data-options='valueField:'Key',textField:'Value',panelHeight : 'auto',editable:false,required:true“/>这里的“auto”是EasyUI特有的，必须加引号。

但布尔值true一定不能加引号，但很多网上搜到的语句就加了引号。

例2. 函数名。

function formatMoney(value, row, index) {return (value.toFixed(2));}JS定义的写法：...columns: [[{ field: 'balance', title: '余额', width: 100, align: 'right',sortable: true, formatter:formatMoney },...HTML直接定义：< th="" data-options='field: ' balance',width:="" 10="">0, align: 'right', sortable: true, formatter:formatMoney'> 余额< th="">这里自定义的formatMoney函数就绝对不能加引号！我花了半天时间才明白，这是我学艺不精，EasyUI的例子里写得很明白。

Easyui学习整理笔记

Easyui学习整理笔记@⽬录对⼯作中遇到的easyui做⼀下笔记，不定时更新(1) 表格双击事件datagrid和treegrid都适⽤，例⼦：onDblClickRow :function(rowIndex,rowData){var selections = $("#areaList").datagrid('getSelections');var areaSeq = selections[0].areaSeq;var areaName = selections[0].areaName;var status = selections[0].tipsAreaRelaStatus;if(status =='1'){$.messager.alert("操作提⽰","已配置过该提⽰语，继续配置数据将覆盖旧数据！","warning");return;}treeOption.addNodeToList(1,areaSeq,areaName,status);}(2) treegrid传参更新var jsonData = {'queryFlag':flag, 'areaName':$('#areaName').val()};$('#areaList').treegrid({queryParams: jsonData});var params = $("#areaList").treegrid("options").queryParams;$("#areaList").treegrid("options").queryParams=params;$("#areaList").treegrid("reload")(3) 设置列表checkbox单选easyui设置checkbox单选：singleSelect : true(4) Easyui实现单⾏选择和取消选择var isCheckFlag = true;$('#flowList').datagrid({....onClickCell:function(rowIndex,field,value){isCheckFlag = false;},onSelect:function(rowIndex,rowData){if(!isCheckFlag){$(this).datagrid('unselectAll');isCheckFlag = true;$(this).datagrid('selectRow', rowIndex);}},onUnselect:function(rowIndex,rowData){if(!isCheckFlag) {isCheckFlag = true;$(this).datagrid('unselectRow', rowIndex);}}});。

easyUI学习笔记

esayUI前端开发：企业中java工程师，大多不擅于HTML+CSS 网页布局设计，门户网站（由前端工程师设计），企业内部应用软件（java工程师，选择前端UI框架ExtJS 、Flex 、Easy UI ）---------------------- Easy UI 学习成本非常低easyui 最新版本1.3.4，bos开发使用1.3.2版本ExtJS 2.x 免费，3.x 开始收费Easy ui 1.2.3版本开始收费问题：为什么你不用ExtJS ?easy ui 学习成本低，很容易在项目中集成使用，ExtJS 学习成本高昂EasyUI+tutorial.CHM 官方demo例子jQuery_EasyUI.doc demo例子EasyUI-API+1.3.2.chm 中文apijquery.EasyUI-1.3.1+API.chm 英文apijquery-easyui-1.3.2.zip 框架开发包目录结构分析demo 示例locale 国际化信息文件（默认英文提示信息）plugins 框架功能js文件src 源码themes 主题样式自带5套主题，icons 图标文件easyloader.js 核心加载器（加载plugins 功能js）jquery-1.8.0.min.js jquery开发js文件jquery.easyui.min.js easy ui 框架功能js合集jquery.easyui.min.js == easyloader.js + plugins/*1.如何在页面中使用easy ui ？引入四个文件<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.3.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>2、学习使用easy ui 布局功能layout 布局控件使用将body、div 分成东西南北中，五个部分<body class="easyui-layout"><div region="north"style="height: 100px" title="北部面板">北部</div><div data-options="region:'south',title:'南部面板'"style="height:100px">南部</div><div data-options="region:'west',title:'西部面板'"style="width: 100px">西部</div><div data-options="region:'east',title:'东部面板'"style="width: 100px">东部</div><div data-options="region:'center',title:'中部面板'">中部</div></body>注意，只有center区域的必须的3、可折叠菜单accordion 布局<div class="easyui-accordion"data-options="fit:true"><div data-options="title:'基本菜单'">aa</div><div data-options="title:'系统菜单'">bb</div></div>通过iconCls:'icon-help' 指定图标（必须引入icon.css文件）4、选项卡布局tabs 布局closable为true , 选项卡可以被关闭<div class="easyui-tabs"data-options="fit:true"><div data-options="title:'选项卡一'">选项卡一</div><div data-options="title:'选项卡二',closable:true">选项卡二</div><div data-options="title:'选项卡三'">选项卡三</div> </div>ztree主页菜单栏树形菜单生成树形结构菜单，通常使用js 类库制作的bos 菜单树，使用ztree 制作的1、zTree 是一个依靠jQuery 实现的多功能“树插件”。

JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除学习笔记教程有需要了解的朋友可参考本的笔记,批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细<script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架$(function () {$("#dg").datagrid({url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项iconCls: "icon-add",fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小//toolbar设置表格顶部的工具栏，以数组形式设置idField: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句pagination: true, //显示最下端的分页工具栏rownumbers: true, //显示行数1，2，3，4...pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的APIsortName: "name", //初始化表格时依据的排序字段必须和数据库中的字段名称相同sortOrder: "asc", //正序columns: [[{field: 'code', title: 'Code', width: 100,editor: {//设置其为可编辑type: 'validatebox',//设置编辑样式自带样式有：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree 可自行扩展options: {}}},{field: 'name', title: 'Name', width: 100, sortable: true,editor: {//设置其为可编辑type: 'validatebox',//设置编辑格式options: {required: true//设置编辑规则属性}}},//sortable:true点击该列的时候可以改变升降序{field: 'addr', title: 'addr', width: 100,editor: {//设置其为可编辑type: 'datetimebox',//这里我们将进行一个datetimebox的扩展options: {required: true//设置编辑规则属性}}}]],//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo toolbar: [{//在dategrid表单的头部添加按钮text: "添加",iconCls: "icon-add",handler: function () {if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {//防止同时打开过多添加行$("#dg").datagrid('insertRow', {//在指定行添加数据，appendRow是在最后一行添加数据index: 0, // 行数从0开始计算row: {code: '',name: '请输入姓名',addr: ''}});$("#dg").datagrid('beginEdit', 0);//开启编辑并传入要编辑的行editFlag = 0;}}}, '-', {//'-'就是在两个按钮的中间加一个竖线分割，看着舒服text: "删除",iconCls: "icon-remove",handler: function () {//选中要删除的行var rows = $("#dg").datagrid('getSelections');if (rows.length > 0) {//选中几行的话触发事件$.message.confirm("提示", "您确定要删除这些数据吗？", function (res) {//提示是否删除if (res) {var codes = {};for (var i = 0; i < rows.length; i++) {codes.push(rows[i].code);}(codes.join(','));//拼接字符串并传递到后台处理数据，循环删除，成功后刷新datagrid}});}}}, '-', {text: "修改",iconCls: "icon-edit",handler: function () {//选中一行进行编辑var rows = $("#dg").datagrid('getSelections');if (rows.length == 1) {//选中一行的话触发事件if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {var index = $("#dg").datagrid('getRowIndex', rows[0]);//获取选定行的索引$("#dg").datagrid('beginEdit', index);//开启编辑并传入要编辑的行editFlag = index;}}}}, '-', {text: "保存",iconCls: "icon-save",handler: function () {$("#dg").datagrid('endEdit', editFlag);}}, '-', {text: "撤销",iconCls: "icon-redo",handler: function () {editFlag = undefined;$("#dg").datagrid('rejectChanges');}}, '-'],onAfterEdit: function (rowIndex, rowData, changes) {//在添加完毕endEdit，保存时触发(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据，这里我们就可以利用这些数据异步到后台添加，添加完成后，刷新datagrideditFlag = undefined;//重置}, onDblClickCell: function (rowIndex, field, value) {//双击该行修改内容if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {$("#dg").datagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行editFlag = rowIndex;}}});});//点击查找按钮出发事件function searchFunc() {alert("123");$("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台//这里介绍reload的使用，使用reload时，会默认记住当前页面，当点击查询时，如果我们查到的数据只有三条，我们每页显示10挑数据，当前页码是2，那么我们将无法在当前页面看到我们查询出的结果，只有将页面向前跳转才会看到，但是用load就不会出现这种情况}//点击清空按钮出发事件function clearSearch() {$("#dg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空}</script><div class="easyui-tabs" fit="true" border="false"><div title="数据展示表格" border="false" fit="true"><div class="easyui-layout" fit="true" border="false"><div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;"><form id="searchForm"><table><tr><th>用户姓名：</th><td><input name="name" /></td></tr><tr><th>创建开始时间</th><td><input class="easyui-datetimebox" editable="false" name="subStartTime" /></td><th>创建结束时间</th><td><input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td><td><a class="easyui-linkbutton" href="javascript：void(0);" onclick="searchFunc();">查找</a></td><td><a class="easyui-linkbutton" href="javascript：void(0);" onclick="clearSearch();">清空</a></td></tr></table></form></div><div data-options="region:'center',split:false"><table id="dg"></table></div></div></div></div>扩展editor方法：datetimebox$(function () {/*扩展Editors的datetimebox方法*/$.extend($.fn.datagrid.defaults.editors, {datetimebox: {//为方法取名init: function (container, options) {var editor = $('<input />').appendTo(container);options.editable = false;//设置其不能手动输入editor.datetimebox(options);return editor;},getValue: function (target) {//取值return $(target).datetimebox('getValue');},setValue: function (target, value) {//设置值$(target).datetimebox('setValue', value);},resize: function (target, width) {$(target).datetimebox('resize', width);},destroy: function (target) {$(target).datetimebox('destroy');//销毁生成的panel}}});});以上所述是小编给大家介绍的JQuery EasyUI datagrid 添加、修改、删除操作的全部叙述，希望对大家有所帮助。

easyui学习笔记.docx

Easyui学习笔记-------郑相弼仅以此送给和我同样的初级程序员。

Application1calss=“easyui-datagrid”这个class的样式就是一条横线如图2pagination=“true”这个样式的功能是一个分页查询的‘模具’如图3rownumbers=”true”这个样式是分页查询模具上方多出一快行高的距离如图4现在就要准备在分页上先创建好每一个名字了，首先我起了one two three 三个field 名，如图而这其中的fistname这些名字在页面上的显示就如下图5class=”easyui-lingbutton”是一个正方形的按钮iconCls=”icon-add”是一个+号的显示如图：6plain=“true”是隐藏方块当点击+号的时候方形背景就是显示反之则不会显示如图7编辑删除和增加是一样的只不过iconCls=”icon-add”是增加而 iconCls=“icon-edit”是编辑 iconCls=“icon-remove”是删除 plain=“true”的功能是一样的都是让方形隐藏显示如图：8toolbar=“#toolbar”这个样式主要是让增加修改和删除的id对应让他们保持在上边如图：如若不用这个样式就不会出现在这里反而出现在下边了。

建议多多反复使用练习，你就会发现easyui没什么难的地方。

9class=”easyui-dialog”这样样式主要是做什么的呢？看到没有，是的，你发现没有他会出现新的页面，我们可以这么认为，并且第8个和这个还可以一起利用起来做一个简单的东西。

如图：接下来是和第8个合在一起做的练习，请看。

如图：这里让我很奇怪为什么a这个修改不会跑进newdlalog里面的左上角，此处有待共同观察。

10这里主要以一个demo 一个demo 现做先说希望广大学友能耐得住寂寞，因为谁都是这么过来的，继续现在有出现了这么个样式，class=“easyui-validatebox“这是做什么的呢？想要看到效果，就必须要和javascript配合了。

easyui学习笔记3在展开行内的增删改操作++

最近公司要用easyui，这里自己看了官网几篇文章，遇到些问题，大多数的问题都是敲代码的时候笔误，其他有些地方确实需要注意一下，这里做些笔记。

1.在mysql中建好表之后修改id字段为递增字段，发现这个奇怪的mysql语法，如下alter table student change id id int auto_increment;这句是在student表已经建好的情况下来修改字段id为自增列，奇怪的是为嘛change id id，并且后面还要带上id的类型int？2.html5标记如何申明自己这个html文档是html5标准的呢，<!DOCTYPE html>就这句，根据w3c 上的解释，只能是这一句3.定义一个表格的语法如下<table id="dg" title="My User" class="easyui-datagrid"style="width:700px;height:250px"url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="firstname" width="50">First Name</th><th field="lastname" width="50">Last Name</th><th field="phone" width="50">Phone</th><th field="email" width="50">Email</th></tr></thead></table>注意这里很多的标签元素是不符合html4的规范的url="get_users.php"这个，在html5里面才有用，在html4里面是不规范的，没有这个元素，toolbar="#toolbar"这个表示表格的工具栏，就是新加，删除，修改的操作。

EasyUI中文学习教程

教程概述这个教程的目的是说明如何使用easyui框架容易的创建网页。

首先，你需要包含一些js和css文件：<link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script>easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。

使用这些类之前，需要包含：<link rel="stylesheet"type="text/css"href="../themes/icon.css">内容1.拖放o基本拖放o创建购物车式拖放o创建课程表基本拖放这个教程显示如何使HTML元素变得可拖放。

这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：<div id="dd1"class="dd-demo"></div><div id="dd2"class="dd-demo"></div><div id="dd3"class="dd-demo"></div>让第一个DIV元素可拖放，使用默认的拖放样式。

EasyUI 学习笔记汇总

EasyUI 学习笔记1．class="easyui-datagrid" 用于列表展示2．注释：图中有标有绿色字体的是在图片中显示的图片的样式，比如添加，删除，修改，保存，取消。

把jquery easyui下载好之后，一般引用下页几个文件引入样式代码如下:<link href="/Resources/easyui/css/default.css" rel="style sheet" type="text/css" /><link href="/Resources/easyui/js/themes/default/ea syui.css" rel="stylesheet"type="text/css" />//页面图标样式<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/Resources/easyui/js/jquery-1.7.2.min. js" type="text/javascript"></script>//jquery easyui主要的js<script src="/Resources/easyui/js/jquery.easyui.mi n.js" type="text/javascript"></script>列表展示数据代码如下:<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; he ight: 250px"url="/GetJson/CreateJson.aspx" toolbar="#t oolbar" pagination="true" rownumbers="true"fitcolumns="true" singleselect="true"><thead><tr><th field="AccountCode" width="50">编号</th><th field="AccountName" width="50">卡名</th><th field="AccountPwd" width="50">密码</th><th field="CreateTime" width="50">创建时间</th><th field="CreateName" width="50">创建人</th></tr></thead></table>jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

p agination是否显示分页，ro wnumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。

工具条代码代码如下:<div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconcls=" icon-add" onclick="newuser()"plain="true">添加</a> <a href="javascript:void(0)" class ="easyui-linkbutton" iconcls="icon-edit"onclick="edituser()" plain="true">修改</a> <a href="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-remove" plain="true">删除< /a></div>添加弹出框：在添加弹出框内容中，有一个class=”easy-dialog”, 这个对话框（dialog）是一个特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。

默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。

用户可以配置对话框行为来显示其他工具（比如：可折叠collapsible、可最小化minimizable、可最大化maximizable，等等）。

具体参考开发文档，如下图：添加数据弹出框代码如下：数据源添加弹出框复制代码代码如下:<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"closed="true" buttons="#dlg-buttons"><div class="ftitle">信息编辑</div><form id="fm" method="post"><div class="fitem"><label>编号</label><input name="AccountCode" class="easyui-validatebox" requi red="true" /></div><div class="fitem"><label>卡号</label><input name="AccountName" class="easyui-validatebox" requi red="true" /></div><div class="fitem"><label>密码</label><input name="AccountPwd" class="easyui-validatebox" required="true" /></div><div class="fitem"><label>创建时间</label><input name="CreateTime" class="easyui-datebox" required=" true" /></div><div class="fitem"><label>创建人</label><input name="CreateName" class="easyui-vlidatebox" /> </div><input type="hidden" name="action" id="hidtype" /><input type="hidden" name="ID" id="Nameid" /></form></div>?<div id="dlg-buttons"><a href="javascript:void(0)" class="easyui-linkbutton" onclick=" saveuser()" iconcls="icon-save">保存</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick=" javascript:$('#dlg').dialog('close')"iconcls="icon-cancel">取消</a></div>class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；对弹出的添加页面添加样式：（id 用#，clas用.）代码如下:?<style type="text/css">#fm{margin: 0;padding: 10px 30px;}.ftitle{font-size: 14px;font-weight: bold;padding: 5px 0;margin-bottom: 10px;border-bottom: 1px solid #ccc;}.fitem{margin-bottom: 5px;}.fitem label{display: inline-block;width: 80px;}</style>js实现对数据的添加修改删除代码如下:<script type="text/javascript">var url;var type;function newuser() {$("#dlg").dialog("open").dialog('setTitle', 'New User'); ;$("#fm").form("clear");url = "UserManage.aspx";document.getElementById("hidtype").value="submit";}function edituser() {var row = $("#dg").datagrid("getSelected");if (row) {$("#dlg").dialog("open").dialog('setTitle', 'Edit User');$("#fm").form("load", row);url = "UserManage.aspx?id=" + row.ID;}}function saveuser() {$("#fm").form("submit", {url: url,onsubmit: function () {return $(this).form("validate");},success: function (result) {if (result == "1") {$.messager.alert("提示信息", "操作成功");$("#dlg").dialog("close");$("#dg").datagrid("load");}else {$.messager.alert("提示信息", "操作失败");}}});}function destroyUser() {var row = $('#dg').datagrid('getSelected');if (row) {$.messager.confirm('Confirm', 'Are you sure you want to des troy this user?', function (r) {if (r) {$.post('destroy_user.php', { id: row.id }, function (result) {if (result.success) {$('#dg').datagrid('reload'); // reload the user data} else {$.messager.show({ // show error messagetitle: 'Error',msg: result.errorMsg});}}, 'json');}});}}</script>data-options="fit:true"-><bodyclass="easyui-layout"data-options="fit:true">-</body>加上data-options="fit:true"好让框架能自适应浏览器窗口。