EASYUI - 技术教程文章
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍【图】
初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1、列表展示2、新增页面3、修改页面把jquery easyui下载好之后，一般引...
jquery easyui滚动条部分设置介绍
在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法 代码如下://获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); //获取...
Jquery easyui 下loaing效果示例代码
代码如下://采用jquery easyui loading css效果 function ajaxLoading(){ $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2}); ...
JQueryEasyUI datagrid框架的进阶使用【代码】【图】
由于datagrid接收数据为Json格式，所以我们在前台展示数据的时候会出现问题，尤其是时间格式，在Json序列化之后，前台无法展示正确的时间数据，那么我们如何解决这样的问题呢？首先我们可以使用datapattern.js来解决这个问题：无需废话，直接上代码：<script src="Scripts/datapattern.js" type="text/javascript"></script>代码如下://列表初始化function initTable(searchWhere) {$(#tt).datagrid({url: /UserInfo/GetAllUserInf...
JQueryEasyUI datagrid框架的基本使用【图】
今天说说这个datagrid框架的基本使用，这个框架一直以来都是大家比较头疼的框架，尤其是Json数据的拼接，后台前台都很重要，使用这个框架，最重要的是仔细：无需废话，上代码了： 代码如下:<link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引用你想使用的样式包--><link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/...
JQueryEasyUI Layout布局框架的使用
layout就是一个布局面板： 也就是布局的容器，有五个布局区域：北部，南部，东部，西部和中心。其中中心区域面板是必需的，但中心区域面板边缘区域面板是可选的。通过拖动它的边框，面板，可以调整每一个边缘地区。可以嵌套的布局，以便用户可以建立复杂的布局。 如果想要各个区域中的框架随框架的大小改变，请嵌套到layout框架中； 代码如下:<script type="text/javascript"> //split属性：如果设置为true将显示一个分隔条...
jQuery easyui datagrid动态查询数据实例讲解【图】
该插件组小巧使用方便，以下是一个从前台提交查询条件，从MSSQL返回json数据的一个事例 HTML前端代码 代码如下:<?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="/inc/js/EasyUI/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="/inc/js/EasyUI/themes/icon.css"> <script ty...
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
在使用Easyui GridView时，如果要Gridview的宽度和窗口的宽度相同，只需要设置fitColumns: true即可 这样实现以后，如果窗口的大小调整后，gridview的宽度是不会改变的，这时就需要我们自己来我完成了。为window添加一个resize事件，在事件回调方法中让gridview改变宽度即可： 代码如下://在调整了窗口大小以后，设置easyui gridview也调整宽度 $(window).resize(function () { $(#gvManage).datagrid(resize); });
EASYUI TREEGRID异步加载数据实现方法【图】
官方提供的treegrid的ex 我给大家贴出来看看吧： 代码如下:$(function(){ $(#tt).treegrid({ url:treegrid_data3.json, onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面初始化的。 看看他的JSON: 代码如下:{"total":117,"rows":[ <SPAN style="COLOR: #ff0000">{"id":1,"code":"code1","name":"name1","addr":"address1","state":"closed"},</SPAN> {"id":11,"code":"code11","name":"name11","addr"...
EasyUI 中 MenuButton 的使用方法
具体操作实现方法： Html 代码： 代码如下:<a id="a4" style="color:#0094ff" icon="icon-lightning">批量设置列宽</a> <div id="cusmenu" style="width:150px;"> <div id="80">宽度 80px</div> <div id="100">宽度 100px</div> <div id="120">宽度 120px</div> <div class="menu-sep"></div> <div iconCls="icon-set2">自定义列宽</div> </div> js: 代码如下://初始化 var ddlMenu = $(#a4).menubutton({ menu: #cusmenu }); /...
为EasyUI的Tab标签添加右键菜单的方法
前期的准备工作： 1、下载DEMO源码，并升级为最新版本（jquery 1.7.2,Easyui 1.2.6）,直接替换就可以啦，升级easyui 是的要把css js theme 全部替换 2、在首页的HTML代码中：将 代码如下:<div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabupdate">刷新</div> <div class="menu-sep"></div> <div id="mm-tabclose">关闭</div> <div id="mm-tabcloseall">全部关闭</div> <div id="mm-tabcloseother">除此之外...
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
我的弹窗是这么写的 代码如下:$(#aa).click(function(){ //按钮单击事件 $(#w).window({//窗口初始化 title:随便点,width:400,height:300,iconCls:icon_add, //重要的部分 onBeforeClose:function(){ //当面板关闭之前触发的事件 if (confirm(窗口正在关闭，请确认您当前的操作已保存。\n 是否继续关闭窗口？)) { $(#w).window(close, true); //这里调用close 方法，tru...
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
最近项目中需要跨域调用其他项目的数据，其他项目也是使用的EasyUI的datagrid组件，开始以为直接在datagrid的url属性定义为其他项目的url地址即可，可是测试下发现的确是返回了json数据但是json数据提示“invalid label” 错误，网上搜索了下错误解决办法，参考 “JavaScript处理Json的invalid label错误解决办法“的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误，感觉原因不在格式问题。 搜索了下JavaScript跨...
jQuery-Easyui 1.2 实现多层菜单效果的代码【图】
11年9月份项目刚开始时，找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了！一直搁在那……还好最后找到了 今天这位朋友想要这块，就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵 需求：菜单比如“导航菜单-基础数据-基础数据1-子菜单1” 效果： js代码如下 代码如下:/**************...
EasyUI的treegrid组件动态加载数据问题的解决办法
搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的，不过以往利用datagrid的reload方法加参数的方式加载查询结果数据，可是treegrid却只执行reload不能加载带参数的查询结果，可能是做了限制，如下代码不能加载查询结果： 代码如下:<table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid('reload',{'name':'mikel'});于是又去官方论坛搜索相关问题，发现一个有价值的帖子，...
jQuery EasyUI API 中文文档 - Tree树使用介绍
用 $.fn.tree.defaults 重写了 defaults。 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义，此标记可以定义为叶节点和子节点。下面是一个示例： 代码如下:<ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span...
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
扩展自 $.fn.datagrid.defaults，用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下:<table id="tt"></table> 代码如下:$(#tt).treegrid({ url:treegrid_data.json, treeField:name, columns:[[ {title:Task Name,field:name,width:180}, {field:persons,title:Persons,width:60,align:right}, {field:begin,title:Begin Date,width:80}, {field:end,title:End Date,width:80} ]] }); 特性 其特性扩展...
jQuery EasyUI API 中文文档 - DataGrid数据表格
扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 代码如下:<table id="tt"></table> 代码如下:$(#tt).datagrid({ url:datagrid_data.json, columns:[[ {field:code,title:Code,width:100}, {field:name,title:Name,width:100}, {field:price,title:Price,width:100,align:right} ]] }); 数据表格（DataGrid）的特性<?XML:NAMESPACE PREFIX = O ...
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
扩展自 $.fn.datagrid.defaults，用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下:<table id="pg"></table> 代码如下:$(#pg).propertygrid({ url:propertygrid_data.json, showGroup:true }); 特性 其特性扩展自 datagrid，下列是为 propertygrid 增加的特性。 名称<?XML:NAMESPACE PREFIX = O />类型说明默认值showGroupboolean定义是否显示特性组。falsegroupFieldstring定义组的字段名。grou...
jQuery EasyUI API 中文文档 - Dialog对话框【图】
扩展自 $.fn.window.defaults，用 $.fn.dialog.defaults 重写了 defaults。 <?XML:NAMESPACE PREFIX = O />依赖 window linkbutton 用法 代码如下:<div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 代码如下:$(#dd).dialog({ modal:true }); 特性 其特性扩展自 window，下列是为 dialog 重写的特性。 名称类型说明默认值titlestring对话框的标题文字。New Dialogcollapsibleboole...
jQuery EasyUI API 中文文档 - Calendar日历使用【图】
用 $.fn.calendar.defaults 重写了 defaults。 <?XML:NAMESPACE PREFIX = O />用法 代码如下:<div id="cc" style="width:180px;height:180px;"></div> 代码如下:$(#cc).calendar({ width:600, height:600, current:new Date() }); 特性名称类型说明默认值widthnumber日历组件的宽度。180heightnumber日历组件的高度。180fitbooleantrue 时设置日历的尺寸以适应它的父容器。falseborderboolean定义是否显示边框。trueweeksarr...
jQuery EasyUI API 中文文档 - Spinner微调器使用
扩展自 $.fn.validatebox.defaults，用 $.fn.spinner.defaults 重写了 defaults。 依赖 validatebox 用法 代码如下:<input id="ss" value="2"> 代码如下:$(#ss).spinner({ required:true, increment:10 }); 特性<?XML:NAMESPACE PREFIX = O /> 其特性扩展自 validatebox，下列是为 spinner 增加的特性。名称类型说明默认值widthnumber组件的宽度。autovaluestring初始值。 minstring允许的最小值。nullmaxstring允许的最大值。...
jQuery EasyUI API 中文文档 - ComboBox组合框【图】
扩展自 $.fn.combo.defaults。 用 $.fn.combobox.defaults 重写了 defaults。 <?XML:NAMESPACE PREFIX = O /> 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select> <input id="cc" name="dept" value="aa"> 代码如下:$(#cc).combobox({ url:combobox_data.json...
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍【图】
扩展自 $.fn.spinner.defaults 和 $.fn.numberbox.defaults，用 $.fn.numberspinner.defaults 重写了 defaults。 依赖 spinner numberbox 用法 <input id="ss" min="10" max="100" required="true" style="width:80px;"> 代码如下:$(#ss).numberspinner({ editable:false }); 特性<?XML:NAMESPACE PREFIX = O /> 其特性扩展自 spinner 和 numberbox 。 事件 其事件扩展自 spinner 。 方法 其方法扩展自 spinner，下列是为 number...
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器【图】
扩展自 $.fn.spinner.defaults，用 $.fn.timespinner.defaults 重写了 defaults。 依赖 spinner 用法 代码如下:<input id="ss" required="true" style="width:80px;"> 代码如下:$(#ss).timespinner({ showSeconds:true }); 特性<?XML:NAMESPACE PREFIX = O /> 其特性扩展自 spinner，下列是为 timespinner 增加的特性。.名称类型说明默认值separatorstring时分秒之间的分隔符。:showSecondsboolean定义是否显示秒的信息。fals...
jQuery EasyUI API 中文文档 - ValidateBox验证框【图】
用 $.fn.validatebox.defaults 重写了 defaults。 <?XML:NAMESPACE PREFIX = O />用法 代码如下:<input id="vv" required="true" validType="email"> 代码如下:$(#vv).validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则： email：匹配 email 正则表达式规则 url：匹配 URL 正则表达式规则 length[0,100]：允许从 x 到 y 个字符 remote[http://.../acti...
jQuery EasyUI API 中文文档 - ComboTree组合树【图】
扩展自 $.fn.combo.defaults 和 $.fn.tree.defaults。用 $.fn.combotree.defaults 重写了defaults。 <?XML:NAMESPACE PREFIX = O />依赖 combo tree 用法 <select id="cc" style="width:200px;"></select> <input id="cc" value="01"> 代码如下:$(#cc).combotree({ url:tree_data.json }); 特性 其特性扩展自 combo 和 tree，下列是为 combotree 重写的特性。名称类型说明默认值editableboolean定义用户是否可以直接往文本域中输...
jQuery EasyUI API 中文文档 - NumberBox数字框
扩展自 $.fn.validatebox.defaults，用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 代码如下:<input type="text" id="nn"></input> 代码如下:$(#nn).numberbox({ min:0, precision:2 }); 特性<?XML:NAMESPACE PREFIX = O /> 其特性扩展自 validatebox，下列是为 numberbox 增加的特性。名称类型说明默认值disabledboolean定义是否禁用该域。falseminnumber允许的最小值。nullmaxnumber允许的最大值。...
jQuery EasyUI API 中文文档 DateTimeBox日期时间框【图】
扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。 <?XML:NAMESPACE PREFIX = O />依赖 datebox timespinner 用法 代码如下:<input id="dt" type="text"></input> 代码如下:$(#dt).datetimebox({ showSeconds:false }); 特性 其特性扩展自 datebox，下列是为 datetimebox 增加的特性。名称类型说明默认值showSecondsboolean定义是否显示秒的信息。true 方法 其方法扩展自 datebox，下列是为 d...
jQuery EasyUI API 中文文档 - Documentation 文档
每个easyui组件都有特性（property）、方法（method）和事件（event），用户可以很容易地扩展它们。 特性 特性在jQuery.fn.{plugin}.defaults里定义。例如， dialog的特性在jQuery.fn.dialog.defaults里定义。 事件 事件（回调函数）也在jQuery.fn.{plugin}.defaults里定义。 方法 方法在jQuery.fn.{plugin}.methods里定义。每个方法有两个参数：jq和param。第一个参数'jq'是必须的，它是指jQuery对象。第二个参数'param' 是指传递...