EASYUI - 技术教程文章
easyui反选全选和全不选代码以及方法的使用【代码】
首先要说明的是，onclick="javascript:这里只能写JS的代码，不能写个方法名。"，其次就是onclick=“这里写的方法名必须存在于本页面的行内JS，如果是引入的JS文件中的方法他不会识别，会告诉你没有找到XX方法” 接下来是easyui的方法：//全选$("#mAllSelect").click(function () {$("#dgShowData").datagrid("checkAll");});//反选$("#mUnAllSelect").click(function () {var pageRow = $("#dgShowData").datagrid("getRows")var s...
Easyui dialog【代码】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="styleSheet" type="text/css" href="js/easyUI/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="js/easyUI/icon.css"> <link rel="stylesheet" type="text/css" href="js/easyUI/demo.css"><script type="text/javascript" src="js/easyUI/jquery.min.js"></script> <script type="text/javascript" src="js...
(原创)EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件
有时候在行编辑的时候，一个编辑框的值要根据其它编辑框的值进行变化，那么可以通过在开启编辑时，找到特定的Editor，为其添加事件 // 绑定事件, index为当前编辑行var editors = $(‘#staffLogDetailGrid‘).datagrid(‘getEditors‘, index); //获得当前行的编辑对象console.info(editors[5]); //editor[5]表示第五列这个控件var sfgzEditor = editors[5];sfgzEditor.target.bind(‘change‘,function () { console.info...
JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据【图】
因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据，就可以在前台页面数据表格中，以一定形式显示数据库中的数据。此处，我们使用Struts2框架整合DataGrid，实现数据的显示。一、页面内容 为了在页面中显示数据库中字段内容，需要定义一个table，通过EasyUI内部设计，自动显示数据，如下：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% ...
easyui 渲染问题(转)【代码】
1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法：我们之所以在页面中，只要书写相应easyui的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，parser会在文档装载完成的时候($(document).ready)被调用一次，而且是渲染整个页面。然而当页面装载完后，如果用javascript生成的DOM中包含了Easyui支持控件的class，比如说，用javascript生成了以下代码：<a id="tt" href="#" class="easyui-li...
jquery easyui datagrid实现数据修改【图】
1、单击选中待修改行2、使用单独对话框修改数据3、使用updateRow方法修改数据（注意这里只是修改了网页上显示的数据，并没有同步修改数据库中的数据，如果也要同步修改数据库中的数据可以写一个servlet实现）版权声明：本文为博主原创文章，未经博主允许不得转载。原文：http://blog.csdn.net/giser_whu/article/details/47178831
easyui datagrid 动态拼接columns以及赋值【代码】【图】
需求背景如下：后台java代码动态拼接datagrid的columns，然后赋值，实现过程如下：后台java代码拼接过程，只是举个例子，可以根据具体业务拼接：java代码： Map<String, Object> map = new HashMap<String,Object>(); StringBuffer cols = new StringBuffer();cols.append("[[");cols.append("{field:\"field0\",title:\"field0title\",width:80}").append(",");cols.append("{field:\"field1\",title:\"field1t...
EasyUI DataGrid 应用示例
我们使用如下标签来创建表格<table id="dg"></table>JS代码如下：$(‘#dg‘).datagrid({ columns:[[ {field:‘TIME‘,title:‘标题1,width:140}, {field:‘SUM_NUM‘,title:‘标题2,width:140, styler:function(value,row,index){ if (value < 20){ return ‘background-color:#ffee00;color:red;text-decoration:...
easyui——treegrid级联选中之微改进，解决解除选中的问题。【代码】
代码大部分参考网络资源，但针对网络资源中取消选中的各种问题做了改进。if ($.fn.treegrid) {$.extend($.fn.treegrid.methods, {/** * 级联选择 * @param {Object} target * @param {Object} param * param包括两个参数: * id:勾选的节点ID * deepCascade:是否深度级联 * @return {TypeName} */cascadeCheck: function (target, param) {var opts = $.data(target[0], "treegrid").options;if (opts.sin...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（75）-微信公众平台开发-用户管理【代码】【图】
最近代码出现分享问题，360云盘宣布混不下去，所有分享的连接都失效了，最近有时间会把代码转移到百度云，再把文章的代码补回去前言本节主要是关注者(即用户)和用户组的管理,微信公众号提供了用户和用户组的管理,我们可以在微信公众号官方里面进行操作，添加备注和标签,以及移动用户组别，同时,微信公众号也提供了相应的接口另我们本地可以操作.我们主要是同步到本地,这样我们可以自己为用户定义更多的信息,以及与本地的业务更好的...
EasyUI——常见用法总结
1. 使用 data-options 来初始化属性。 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如： <div class="easyui-dialog" style="width:400px;height:200px" data-options="title:‘My Dialog‘,collapsible:true,iconCls:‘icon-ok‘,onOpen:function(){}"> dialog content.</div> 属性，事件，都可以直接写在data-options里面，这样就...
easyui datagrid 分页略解
easyui datagrid 本身自带了分页功能。但是这个需要你自己控制。在后台可以得到两个datagrid的参数，rows 和page。其中rows是每页要显示的个数，page是第几页。单纯的设置rows是不行 的，datagrid真正显示的是你从数据库里得到的真正条数，应该用rows当查询条件，得到rows条才行。传到前台的json传应该是这样的：{"total":50,"rows":[{"sex":"nan16","age":16,"name":"zhangsan16"},{"sex":"nan16","age":16,"name":"zhangsan16"}]...
easyUI之Combo
Combo组件为自定义下拉列表组件，无class的加载方式，主要是通过jquery的方式。它依赖于validatebox,可以用它的很多属性。例如：前台：<div id="box"></div><id id="food"> <div style="width:150px;padding:50px">请选择</div> <div style="padding:50px"><input type="radio" value="gz1"><span>果子1</span></div> <div style="padding:50px"><input type="radio" value="gz2"><span>果子2</span></div> <div sty...
easyui 分页 MVC【代码】【图】
View <script type="text/javascript">var dd;var grid;$(function () {var queryData = null;grid = $(‘#grid‘).datagrid({ //定位到Table标签，Table标签的ID是gridurl: ‘@Url.Action("getUserList")‘, //指向后台的Action来获取当前菜单的信息的Json格式的数据title: ‘用户菜单‘,iconCls: ‘icon-view‘,height: 550,width: function () { return document.body.clientWidth * 0.9 },nowrap: true,autoRowHeight: f...
easyui datagrid加载数据和分页
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String basepath = request.getContextPath();%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!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>Insert title here<...
easyui的datagrid组件，如何设置点击某行不会高亮该行的方式【图】
easyui的datagrid组件，有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式，有好几种方法可以实现我举几个可以根据你具体需求灵活应用:1.修改easyui的css将高亮颜色跟背景颜色一样（简单,但是比较笨）2. 在onClickCell事件里clearSelections一下相当于不允许用户选择。3. onSelect事件里unselectRow一下。4. 在renderRow中判断当前行被选中，设置背景色跟表格背景一样。原文：http://www.cnblogs.com/longshiy...
easyui扩展-日期范围选择.【代码】【图】
参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功能->支持日期范围选取 * (2)右边日期必须大于左边,否则无法‘确认‘提交. (2.1)左边日历选中某个日期后,右边日历会计算可以选择的日期. 不能选择的日期颜色呈灰色. (2.2)‘确定‘时会再次判断左边日期是否小于右边. 若不满足会对右边日历对应文本框进行变色提示. * (3)支持required验证.继承自easyui v...
easyui---panel(面板)【图】
panel笔记：EASYUIpanel: class:easyui-panel,带有title 打开:onclick="javascript:$(‘#c‘).panel(‘open‘)" 关闭:onclick="javascript:$(‘#c‘).panel(‘close‘)" 展开:onclick="javascript:$(‘#panel‘).panel(‘expand‘,true)" 折叠:onclick="javascript:$(‘#panel‘).panel(‘collapse‘,true)" 页脚:data-options="footer:‘#footer‘"//将id为footer的容器作为页脚 关闭(右上角小工具):data-options="closabl...
EasyUi的DataGrid组件扩展，统计当前页信息【图】
1. [代码]使用方法 // 为datagrid开启统计功能$(‘#list‘).datagrid({ ..... // 此处代码略 showFooter : true, onLoadSuccess : function() { $(‘#list‘).datagrid(‘statistics‘); }});// 统计某列（参照金额列）<table id="list"> <thead> <tr> <th field="no"width="100">序号</th> <th field="data"width="100">日期</th> <th field="money"width="100" ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇 前言：博客又有一段时间没有更新了，心里感觉这段时间空空的，好像什么都没有学下，所以就想写博客，所以就有了这个系列，这里当然也要感谢大家了，因这个项目我已经上传了，得到了很多网友的评价，也有好多人发邮件给我说这个框架容易出现问题，不能访问，这也是支持我写这个系列的动力，我将这个项目写成一个系列，可能要很长时间吧，但是我肯定会一直坚持，如果我哪里写的...
雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列，当用户在网格上移动水平滚动条时，冻结列不能滚动到视图的外部。 为了冻结列，您需要定义 frozenColumns 属性。frozenColumn 属性和 columns 属性一样。 $(‘#tt‘).datagrid({ title:‘Frozen Columns‘, iconCls:‘icon-save‘, width:500, height:250, url:‘data/datagrid_data.json‘, frozenColumns:[[ {field:‘itemid‘,tit...
SpringMVC+easyui显示数据
最近做毕业设计，想用easyui，先学习一下CRUD，今天先弄了个表格显示数据库的数据。jsp页面还有很多其它元素，我就不贴上去了。我显示数据的JSP为/WebContent/WEB-INF/views/user/list.jsp 。关键信息如下： <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"url="user/listUsers"toolbar="#toolbar" pagination="true"rownumbers="true" fitColumns="true" singleSelect="true"><thead>...
easyui datagrid控制显示进度条
实际项目中当我们在前台分页的时候需要控制datagrid加载数据时显示进度条，而datagrid默认只有在通过url方式加载数据时才显示进度条，以下代码是手动控制：打开进度条：$(‘#searchAddrDg‘).datagrid(‘loading‘);//打开等待div关闭进度条： $(‘#searchAddrDg‘).datagrid(‘loaded‘);//关闭loding进度条；如果以上代码对您有帮助请点赞哦！！转载请著名出处！原文：http://blog.csdn.net/songhfu/article/details/40016847
easyui+ajaxfileupload,无刷新文件上传【代码】【图】
头文件引用<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/><link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/><script src="easyui/jquery.min.js" type="text/javascript"></script><script src="easyui/jquery.easyui.min.js" type="text/javascript"></script><script src="js/ajaxfileupload.js" type="text/javascript"></script>js代码,这里把返回值修改成上传到服...
easyui改变主题【代码】
1：改变主题，写入cookie 1//创建命名空间easyui.theme 2 namespace(‘easyui.theme‘);3 4/**5 * 改变主题6*/ 7 easyui.theme.changeTheme = function(themeName){8 let easyuiTheme = $(‘#easyuiTheme‘);9 let url = easyuiTheme.attr(‘href‘); 10 let href = url.substring(0,url.indexOf(‘themes‘))+‘themes/‘+themeName+‘/easyui.css‘; 11 easyuiTheme.attr(‘href‘,href);//改变整...
EasyUI之DataGird动态组合列【代码】
Dojo、ExtJS、Jquery（EasyUI、jQgrid、ligerui、DWZ）、还有asp.net中的服务器控件、当然也少不了HTML 标签之table标签了。其中dojo、ExtJS、Jquery这三者应该算是并列关系吧，都是基于JavaScript的框架、只不过dojo、ExtJS的学习成本比jquery高一些罢了，学习曲线陡一些，中文文档少一些，不过功能之强大还属dojo 、extjs，dojo偏向于地图。使用各式各样的datagrid有几年了，一直都没有做过总结，姑且算是忙于工作吧。最为惭愧的...
EasyUI中DataGrid隔行改变背景颜色。【代码】
<table id="dg" class="easyui-datagrid" style="width: 1000px; height: 300px" data-options="rownumbers:true,onClickRow:ClickRow,singleSelect:false,border:true,pagination:true,url:‘DataGridDataHandler.ashx‘,<%-- //隔行变色--%>rowStyler: function(index,row){if ((index % 2)==0){return ‘background-color:#0000C6;color:#fff;font-weight:bold;‘;}else{return ‘background-color:#009100;color:#fff;font-wei...
基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排【图】
上篇《基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽》，主要介绍首页随客户喜好安排区块位置，更好的实现用户体验。这两天将项目中施工计划管理归纳总结一下（ⅠⅡⅢ ⅣⅤⅥ Ⅶ Ⅷ）Ⅰ、施工计划安排 施工计划安排界面，如下图所示。编辑界面，如图所示根据设定的提醒时间，通知施工人员及相关人员有关于消息提醒的实现，在《Windows服务调用Quartz.net 实现消息调度》有详细介绍。原文：http://www.cnblogs.c...
EasyUI+SpringMVC--Maven项目--WEB-INF安全目录访问jsp
每一个Maven工程的目录结构大都相同，这种目录结构称做Maven的标准目录结构。由于Maven是约定优于配置，根据模板直接生成webapp目录，故其默认的Webapp就是其发布目录。我们不需要再copy一份webcontent目录，如果再复制一份webcontent目录，需要在pom.xml里面配置，告诉Maven。 基于Maven约定优于配置，我们用其默认的文件夹目录，所有的jsp都放在了WEB-INF目录下，通过后台SpringMVC返回的界面，找不到返回的界面。这是为...
实用项目管理前台框架：EasyUI，ExtJs【图】
EasyUI项目管理框架，如图:项目名称：微信管理平台项目地址：http://www.cnblogs.com/hanyinglong/p/3236966.html#3007557托管地址：https://subversion.assembla.com/svn/wechatservice/ExtJS项目管理框架，如图：项目名称：优尔博客系统项目地址：http://www.cnblogs.com/youring2/archive/2013/03/05/2943846.html#2887679托管地址：原文：http://www.cnblogs.com/zhangwei595806165/p/3920026.html