EASYUI - 技术教程文章

JQuery EasyUI后台UI框架使用连载【代码】【图】

在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI。它的学习条件、市场上的同类产品、所支持的浏览器等。然后配置运行 jQuery EasyUI。一、什么是JQuery EasyUI jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的JavaScript,也不需要对 css 样式有深入的了解,开发者需要了解的只有一些简单...

Easyui Datagrid 最后一行添加合计 Easyui Datagrid 修改显示行号列宽度【代码】【图】

Easyui Datagrid 最后一行添加合计有多种方法,由于我们列表的列比较多会出现横向滚动条,所以直接用它本身showfooter:true;会出现列表数据和合计行之间出现横向滚动条,所以选择列表最后追加合计行进行处理1、最后一行添加合计 后台计算好每页合计值 前端在列表最后追加一列 Easyui Datagrid 最后一行添加合计 就实现了2、 Easyui Datagrid 修改显示行号列宽度 .datagrid-htable{ w...

EasyUI选项卡页面处理示例【代码】【图】

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Full Layout - jQuery EasyUI Demo</title><%@ include file="/common/taglibs.jsp"%><link id="easyuiTheme" href="${ctx}/res/js/easy...

jquery easyui的使用【图】

第一步下载jquery easyui 下载地址:http://www.jeasyui.com/download/index.php第二步创建Java web项目第三步导入相关的文件。。文件夹结构例如以下<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript"...

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-系统小结【代码】【图】

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-系统小结不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这块比较敢兴趣,讲不讲验证还是看大家的反映),我们应该对系统有一个小结。首先这是一个团队开发项目,基于接口编程,我们从EasyUI搭建系统的框架开始,开始了一个样例程序对EasyUI的DataGrid进行了操作,并实现Unity的注入到容器,使程序 的性能大大提升,代...

SSH结合EasyUI系统(一)———简单介绍

鉴于前文《不仅仅是吐槽》,决定将自己学过的和在学的东西整理一下放进园子;做一个好园友!  接下来将会持续更新的是近一段时间在学的java web中比较流行的框架SSH(Struts+Spring+Hibernate)结合EasyUI整合的demo,至于ssh的介绍,用我的理解一句话描述:Struts让Web与Action交互更简单,Hibernate解决了model与数据库的交互,spring相当于容器很好的将两则融合到一起。3大框架各自发挥了自己的特点,当然有利有弊,这里就不多叙...

解决EasyUI DataGrid删除行失败的方法【图】

笔者最近在做一个项目的后台,用到了EasyUI的datagrid控件,并开启了行内编辑功能,实际上也就是使用了edatagird这个空间,引用了edatagrid.js,一切似乎都做的顺风顺水,添加数据、修改数据都没有问题,然而到删除数据的时候居然没有反应,折腾了好几天也没有任何进展。截图如下:前台代码如下:<table id="lsdg" title="设备数据采集列表" singleSelect="true" rownumbers="true" fitColumns="true" toolbar="#toolbar...

解决bootstrap和easyUI部分css类冲突问题。

今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊。我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样式不正常就是难看了点,easy UI的有问题页面就直接不能看了,所以还的easy UI放后面,我又增加了个人mybootstrap.css,吧bootstrap被覆盖的重命名复制过去就互不冲突了。比如:吧所有的panel替换成b-panel存到mybootstrap.css,引用的时候用b-panel原文:http://www.cn...

easyui下拉框过滤优化【代码】

项目中有个需求:编辑combobox的输入域会自动检索匹配项,当没有任何匹配项时,将combobox重置为初始状态。处理方式:重写输入域的blur事件,判断当前值是否为加载的数据集的子集,如果不是则重置。脚本如下:$.fn.combobox.defaults.inputEvents.blur = function(e){var target = e.data.target;var opts = $(target).combobox(‘options‘);if (opts.reversed || opts.limitToList){if (opts.blurTimer){clearTimeout(opts.blurT...

基于MVC+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式【代码】【图】

在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理。本文主要介绍利用Jquery处理数据交互的几种方式,包括获取数据并显示,插入新数据到服务器,更新数据,删除数据等操作。1、利用Jquery获取数据并显示为了顺利获取数据,我们需要保持页面端调用和服务器端保持一致,并相应的把数据转换或者封装为对象实体进行处理。下面我们以一个简单的全国省份、全...

JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法【代码】【图】

jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面效果,easyui的相关地址是:http://jquery-easyui.wikidot.com/; easyui的中文文档地址是:http://www.easyui.net/,本人也利用easeyUI在做一些页面效果。由于我很喜欢那种弹出的对话框界面,因此在界面中应用了Dialog类来处理一些确认的信息,但在利用中发现,弹出的对话框,不能再继续执行asp.net按钮的后台响应代码。界面如下所示。操作是在...

EasyUI DataGrid 合并单元格【代码】【图】

EasyUI DataGrid 合并单元格 1function mergeCells(){ 2var arr =[{mergeFiled:"field",premiseFiled:""}];////合并列的field数组及对应前提条件filed(为空则直接内容合并) 3var dg = $("#id"); //要合并的datagrid中的表格id 4var rowCount = dg.datagrid("getRows").length; 5var cellName; 6var span; 7var perValue = ""; 8var curValue = ""; 9var perCondition=""; 10var curCondition=""; 11var flag=true;...

去掉easyui datagrid内部虚线的方式。

去掉easyui datagrid内部虚线的方式。easyui datagrid的样式是统一写在样式文件中的,如果想要统一替换可以找对应的datagird样式文件中的以下部分。如果想要改变个别页面的,可以将下面的样式代码考到对应的页面的head里就行。页面会先读自己内部的样式,然后才会读引用的样式文件。<style type="text/css"> .datagrid-body td,.datagrid-footer td{ font-size:12px; border-right:0px; border-bottom:0px; o...

struts2+Hibernate4+spring3+EasyUI环境搭建之三:引入sututs2以及spring与sututs2整合【代码】

1、引入struts2<!-- struts2 和心包 排除javassist 因为hibernate也有 会发生冲突--><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-core</artifactId><version>2.3.4.1</version></dependency><!-- struts2和spring整合包 这样会使action对每个请求new一个action对象 非单例注意区别:springMVC注解是Cotroller 是单例的--><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-spring-...

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式【代码】【图】

进行本次文章之前,我们可能需要补充一些基本知识。首先我们系统是基于接口编程的,我们为什么要使用借口编程,其实这是应用了一种企业应用架构模式Repository(仓储)  一种用来封装存储,读取和查找行为的机制,它模拟了一个对象集合。  支持在领域和数据映射层之间实现彻底分离和单向依赖关系的目标。接口编程  最主要的目的是使关注点分离,让开发人员各司其职  代码封存保密,分包开发,无需要给予逻辑结构代码,只需要...

easyui问题小记

在easyui1.4.3版本中,(其他版本不知道是不是也是这样的),绑定在datagridview上面的数据最好不要是带有特殊符号的字段,不然会导致部分的属性不好用,比如这样的字段 START_DATE_$$9 经测试发现easyui对于美元符号似乎不是很友好,所以导致了width:120,align:‘center‘这样的一些column的属性失效,再次记录一下,以便于下次在绑定其他的控件的时候也避免这样的字段出现原文:http://www.cnblogs.com/llcdbk/p/4795616.html

EasyUI 中easyui-textbox和easyui-searchbox文本框的点击事件。【代码】

html:<input id="txtsearch" class="easyui-textbox" data-options="buttonText:‘查询‘,prompt:‘Search...‘" style="width:inherit"/><input id="ssearch" class="easyui-searchbox" data-options="prompt:‘Please Input Value‘,searcher:doSearch" style="width:inherit"/> js: //easyui-textbox点击事件。$(function(){$("#txtsearch").textbox({onClickButton:function(){alert($("#txtsearch").val());$("#dg").d...

EasyUI 扩展自己定义EasyUI校验规则 验证规则(经常使用的)【图】

比如 校验输入框仅仅能录入0-1000之间 最多有2位小数的数字表单<input type="text" id="rate" name="rate" required="true" class="easyui-validatebox" validType="rateCheck[0,1000]" maxlength="6" />$.extend($.fn.validatebox.defaults.rules, {CHS: {validator: function (value, param) {return /^[\u0391-\uFFE5]+$/.test(value);},message: ‘请输入汉字‘},english : {// 验证英语validator : function(value) {return...

Easyui datagrid 设置内容超过单元格宽度时自动换行显示【图】

datagrid 设置内容超过单元格宽度时自动换行显示by:授客 QQ:1033553122 测试环境jquery-easyui-1.5.3 问题描述单元格内容超过单元格宽度不会自动化换行。如下:图1: 图2: 解决方法定义表格时,设置nowrap属性为false.<table id=‘tt‘ class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:500px" data-options=" …… nowrap:false"> <thead> …… </th...

Easyui-datagrid groupview分组后勾选问题【代码】【图】

上面datagrid对应的代码如下: 1 $(‘#tbCheckOut‘).datagrid({2 title: ‘待分配库位‘,3 iconCls: ‘icon-search‘,4 width: 1112,5 height: 500,6 rownumbers: true,7 idField: ‘ID‘,8 sortOrder: ‘desc‘,9 sortName: ‘ID‘, 10 remoteSort: false, 11 nowrap: false, 12 collaps...

easyui-combobox小Demo

<script type="text/javascript"> $("#Function_TypeSelect").combobox({ onSelect:function() { $("#Function_numberVal").val($("input[name=‘Function_TypeSelect‘]").val()) } });</script><div style="height:35px; float:left;color:#000000; font-weight: normal;margin-left:35px;"> <label for="Function_TypeSelect">类型:</label> <input id="Fun...

Spring+SpringMVC+mybatis+easyui整合实例(六)mybatis一对一、一对多关联查询【代码】

我们知道在处理业务查询数据库的时候一定会用到多表查询。 今天我们就来整理下mybatis在注解和非注解方式中如何进行一对一、一对多的关联查询。 其实在处理这个问题上,mybatis提供了两种方式,其一是嵌套结果集方式,二是嵌套select,因为第二种方式要每次要进行n+1次查询会影响系统性能,所以我们这里不做介绍,我们来看嵌套结果集查询。一、一对一关联首先是非注解方式 这里我们以班级 - 老师 这个一对一关系做例子。 首先建...

解决Easyui Combotree的SetValue方法无效【代码】

今天在写代码的时候,遇到个很奇怪的问题:$(‘#department_parent‘).combotree(‘setValue‘, row.id); AjaxForProvince();$(‘#province‘).combobox(‘setValue‘, row.province_id);AjaxForCity(row.province_id);$(‘#city‘).combobox(‘setValue‘, row.city_id);AjaxForZone(row.city_id);$(‘#zone‘).combobox(‘setValue‘, row.zone_id);AjaxForDepartment(row.zone_id);$(‘#department_parent‘).combotree(‘setVa...

easyui的datagrid单击某一栏同时触发onClickRow和其中一栏的自定义事件怎么办?

easyui的datagrid单击某一栏同时触发onClickRow和其中一栏的自定义事件怎么办?自己的解决方法:我的需求是这样子的:点击easyui -datagrid一行的时候需要弹出框显示文章内容当点击一行中点击下载那一栏的时候进行下载问题是,当点击下载的时候也会触发onClickRow事件所以我的解决办法是设置了一个变量来判断究竟是触发哪个的事件代码如下:// JQuery入口 var SELECTDOCID = null; var ARTICL_CONTENT = null; var ISOneRow = 1;//...

easyui form提交时验证必填,打开时不显示必填提示【代码】

给textbox添加required:true属性后,打开页面时整个表单都是红的,需要将其设置为提交时再验证。解决方法:通过textbox的novalidate属性来控制是否开启验证<input class="easyui-textbox" name="Name" id="myName" style="width:200px " type="text" data-options="validType:[‘length[2,20]‘],required:true,novalidate:true"/>提交时调用:$(‘#myName‘).textbox({ novalidate: false }); 原文:https://www.cnblogs.com/cwr-...

easyui 获得父级tabs跳转

/* * 跳转tabls 徐凯锋 */ function JumpPage(type,title,src){ var jq = top.jQuery; var content = "<iframe id=‘mainFrame‘ frameborder=‘no‘ width=‘100%‘ height=‘100%‘ src=‘"+src+"‘></iframe>"; if(type==0){ if (jq("#mainTabs").tabs(‘exists‘, title)){ ...

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载。首先要引入datagrid所引入的js和css。<script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text/css" href="css/easyui.css"><link rel="stylesheet" type="text/css" href="css/icon.css"> 在这里引入的顺序不能有错啊,如果jquery.min.js和jquery.easyui.min.js引入的顺序不对可能...

paip.gui控件tabs控件加载内容的原理以及easyui最佳实现

paip.gui控件tabs控件加载内容的原理以及easyui最佳实现 //////////////tabs控件的加载 同form窗体一样,俩个方式 两个方式:一个是url,简单的文本可以使用这个,不适合事件的情形.. 一个是容器方式(iframe),推荐这个,,, ===========keyword tab的切换已经新增。。代码如下 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:老哇的爪子 Attilax 地址:http://blog.csdn.net/attilax function createTab(tabname) { var ...

EasyUI学习笔记(四)—— datagrid的使用【代码】【图】

一、传统的HTML表格  之前我们做表格的时候是这样写的:<table ><thead><tr><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>001</td><td>小明</td><td>90</td></tr><tr><td>002</td><td>老王</td><td>3</td></tr></tbody></table>  效果是这样的:二、将静态HTML渲染为datagrid样式<!--方式一:将静态HTML渲染为datagrid样式--><table class="easyui-datagrid"><thead><tr><!--field属性必须要加,否则出不...

jQury easyui————窗口(window、dialog)【代码】

下面简单说明下jquery easyui中窗口(window和dialog)的使用,两者之间用很多相同之处。在编写js代码前需要引入jquery.js、jquery.easyui.js、easyui.css、icon.css包,另外为了解决中文引起的乱码问题还需引入easyui-lang-zh_CN.js. javascript代码:$("#window").window({title:"this is title!!!", //窗口标题width:600,height:300,collapsiable:true, //定义窗口是否折叠minimizable:true, //是否...