EASYUI - 技术教程文章
【EasyUi DataGrid】动态加载列【图】
动态加载列可以说是一个从无到有的过程，如果只是网页上的DataGrid实现那就太无味了，有趣的在这里，这个页面上连带着一大堆的数据库表的查询修改，尤其是做着做着发现数据表设计有缺陷，需要的数据竟然只有出口没有入口，想想也是醉了，对业务不熟悉真心的杀不起啊。这个其实蛮好玩的，就像玩捉迷藏藏得那个人叫做nothing，再后来我又遇到了Multiple-births（多胞胎），一个页面上涉及到了六七张数据库表，里边的字段名虽然不一样...
项目总结—jQuery EasyUI-DataGrid 拼表及查看详情【图】
概要 在上一篇文章中,我们将如何动态的显示表头进行了介绍,在上一篇文章中还提到一个问题,DataGrid显示的数据不是直接来自于数据库而是拼接而成,这个表又是怎么拼接而成的呢，这次我们就来学习下它的具体实现. 实现 要实现的功能是,在表格中的"数据录入情况"和"计算情况"都是通过数据库中的一些信息的判断才得到表格中显示的"完成"、"未完成"、"计算"、"未计算"，除此之外表格中有个"查看详情",点击查看详情还可以进...
bootstrap、jquery easyui、extjs界面比较
最近需要做一个界面，有下拉选择框、按钮、表格。之前用过jquery ui，样子还凑合，但是很大的一个问题是没有表格。于是我转向了bootstrap，这个最火最好的前端显示框架，发现它只是一个强调html5+css3的移动优先响应式设计的框框，很多东西都需要你自己订制。别说表格了，连下拉框都没有。不过好在它很火，于是有很多补充的项目。Flat UI不错，但用了一下报错，没时间研究源代码于是暂时放弃了。接着想起了以前很流行的easyui，登上...
字符串解析成easyui-tree的格式【代码】【图】
传入的list:[30 : null : null, 301503 : null : null, 301501 : null : null, 301502 : null : null, 3015 : null : null]解析后的json: 1publicclass LeftTreeBean {2public StringBuilder getTreeMenus(List lst, String contextPath) {3 StringBuilder model = new StringBuilder("");4 String RightName = "";5 String RightURL = "";6 7 Map rightMap = new HashMap();8 9// fo...
EasyUI实战篇之datagrid：如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)
http://www.stepday.com/topic/?873今天在使用EasyUI的datagrid列表组件想实现一个列表的展现，且列表上方有搜索条件，初始化的时候我是这样配置的： view sourceprint?1.<table id="tBaoXiuList" title="" class="easyui-datagrid" style="width: 723px; height: auto" url="/AjaxCommon/t_baoxiu_ajax.asp?type=getIndexList" toolbar="#bar_search" pageSize="30" pagination="true" rownumbers="true" fitcolumns="true" singl...
jQuery easyui中获取datagrid某一列的值之和【代码】
我想实现的功能就是加载datagrid之和能够计算出某一列的值之和，删除某一行数据的时候会从总数里面减去这列这行的数据，新增一条记录的时候也会把这个数据加在总数上面。。说起来不知道能不能被人理解。。。 求大神帮忙。。下面是部分代码。。 有些代码已经省略了。。 怎么获取“我是那个数”的所有列的值的和呢？？ 和删除增加那列数据呢$(function() {$(‘#content‘).datagrid( {toolbar : [ {text : ‘新增‘,iconCls : ‘ico...
easyui使用数据库数据展示导航标题：idea【图】
客户端jsp网页：1234567<!-- 西部layout --><div data-options="region:‘west‘,split:true,title:‘功能管理‘"style="width:150px;"> <!-- tree导航 --> <ul id="tt"></ul> </div>js部分：发送请求：1234567891011/** * tree的设置 * **/ $("#tt").tree({ url: "getTreeTitles", lines: true });创建实体类，重要：理解下面用pid表示层级之间的管理，默认是0，表示顶级，其次是子...
EasyuiCombobox三级联动【代码】
有许多刚接触Easyui中Combobox控件的朋友可能都会遇到的问题：如何将Combobox做成三级联动?先本人有个三级联动的案例给大家参考参考，经测试能通过。注意Combobox绑定的数据是Json格式哟。 $(function () {var project1 = $("#project1").combobox({url: ‘Project_Select.ashx?flg=0‘,editable: false,valueField: ‘ID‘,textField: ‘projectname‘,editable: false, //不允许手动输入onSelect: function (record) {project2.c...
easyui datagrid load 封装 参数问题 js 作用域【代码】
var temp = { LoginAccount: $(‘#LoginAccount‘).val(), ShopName: $(‘#ShopName‘).val() };function doSearch1() {$(‘#datagrid‘).datagrid(‘load‘, temp);}function doSearch2() {$(‘#datagrid‘).datagrid(‘load‘, {LoginAccount: $(‘#LoginAccount‘).val(),ShopName: $(‘#ShopName‘).val()});}function doSearch3() {var temp = { LoginAccount: $(‘#LoginAccount‘).val(), ShopName: $(‘#ShopName‘).val()...
EasyUI【图】
<1>加载组UI组件的方式<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="加载组UI组件的方式.aspx.cs" Inherits="EasyUI.加载组UI组件的方式" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>加载组UI组件的方式.</title><script src="jquery-1.11.2.js" typ...
easyui的tab加载页面中的form重复提交【图】
http://blog.csdn.net/fxz1982/article/details/8987769Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的.经分析发现,Easyui的tab加载页面后会把目标页面的dialog组件的DOM代码从目...
easyui 快速开发整理【代码】
下面整理了关于easyui的datagrid的开发文档，复制黏贴即刻使用 11:2<link href="../../Content/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"/> 3<link href="../../Content/easyUI/themes/icon.css" rel="stylesheet" type="text/css"/> 4<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 5<script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"><...
atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施，以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求，表单验证须要弹框式，但眼下easyui ms绑定死了tooltip式样 12. 表单验证表现形式 12.1. 弹框 12.2. 浮动tooltip。推荐这个 13. 表单验证的实现原理 13.1. 定义reg 23.2. 解释 23.3. 调用提示。。。 24. 表单验证框架选型easyui》ligerui 24.1. ligerui的表单验证选型。。。24.2. 其它jq验证器 2 5. easyui表单验证的问题 2 6. 通过e...
Easyui Tab刷新
Easyui Tab刷新：function refreshTab(title){var tab = $('#id').tab('getTab',title);$('#id').tab('update',{tab : tab,options : tab.panel('options')}); }版权声明：本文博客原创文章，博客，未经同意，不得转载。原文：http://www.cnblogs.com/gcczhongduan/p/4646660.html
easyui中datagrid空数据集不刷新的解决方式【代码】
datagrid空间可以异步请求json数据，并将新数据覆盖原有数据，重绘数据表。 但是当回来空数据集的时候，js会产生这样一条错误:TypeError: rows is nullfor(var i=0;i<rows.length;i++){^问题出在哪呢？可以看到当空数据集时返回的内容是：{"total":"0","rows":null}可以注意到rows对应的值是null，而需要的是一个集合才能保证js不出错，也就是空集 []。 解决方法:如果无视js错误，只需要在页面上呈现正确的结果，可以在刷新数据集前...
EasyUI Combobox 默认设置
/***绑定运营商，默认设置， 演出CMCC， 传统的价值观念1*/ $('#operatingId').combobox({ url:'data_url',valueField:'id',textField:'name',mode:'remote',onLoadSuccess : function() {$("#operatingId").combobox("select", "CMCC");$("#operatingId").combobox("setValue", 1);} }); 版权声明：本文博主原创文章。博客，未经同意不得转载。原文：http://www.cnblogs.com/mengfanrong/p/4846181.html
easyui单元格悬停事件【代码】
1 $("#tblGrid").datagrid({2 onLoadSuccess: function (data) {3 $(".easyui-tooltip").tooltip({4// content:‘<span class="easyui-tooltip">This is the tooltip message.</span>‘, 5 onShow: function () {6 $(this).tooltip(‘tip‘).css({7 color: ‘#fff‘,8 background: ‘#055395‘,9 border: ‘1px solid #21...
EasyUI DataGrid 添加合计行【代码】
后端返回合计行有时候并不简单，EasyUi DataGrid的Footer可以很方便的在前端添加合计行，并且能实现复杂的合计，例如columnA的合计是columnA的值相加，columnB的合计是columnB的平均值，columnC的合计是columnA的合计除以columnB的合计。 要使Footer生效，必须设置DataGrid的属性showFooter:true,然后扩展我们的合计方法，直接贴代码： $.extend($.fn.datagrid.methods, { statistics: function(jq) {//所有的列var opt = $...
jQuery easyui --datagrid内部嵌入dropdown【图】
1. Easy UI参考：Easyui官网帮助的URL：http://jeasyui.com/在其中找到datagrid查看具体的帮助就可了。2. JQuery easyui开发体会：最近开发了一个项目用的jquery easyui的框架，发现这个框架还不错，不是很复杂的开发，基本能满足要求，主要是免费的，帮助文档也还算完善，就是目前找不到源码，低版本的1.2.4我找到过源码，有的时候需要修改源码的话有点限制了，还有就是使用帮助的时候，有的属性或者方法提供的不是很全，但是比如...
学习easyui疑惑（四）【代码】【图】
这篇文章我将着重写一下关于我这两天做用到easyui做table所遇到的问题，对于easyui所提供的便捷式插件我觉得应该给予肯定，但是同时对于easyui在做table方面的不足在这里说明一下。 首先展示一下我这两天所做的一个table页，这个页面有点难看，但是基本的要求算是实现了，学了两天的jquery算是有个交代吧。 上图： 效果就是折叠式效果，每项中都是table表。为了方便大家学习，我决定将自己的代码附上，里面也没有涉密的东西，都是空...
EasyUI 单个/多个文件上传 SSM+EasyUI【代码】
关于文件上传和下载网上有很多相关教程，但针对入门的新人来说大部分都不够详细，而且由于一直换工作的原因（主要是因为自己的懒惰）把这篇整理拖延了很久，终于在今天打算将它完成了……（此处应有鸡蛋） 首先说要要完成的事情：基于EasyUi+SSM框架完成文件上传，主要实用了easyui-filebox上传按钮；准备工具： 环境： Eclipse 4.3 jdk1.7.0_72 apache-maven-3.0.4 apache-tomcat-7.0.53 spring-mvc-4.0...
easyui-combobox 动态添加选项option
根据后台数据添加：$("#themecombo").combobox({ url:'<%=basePath%>analysis/getactivit.action', valueField:'id',textField:'title',editable:false}); 然后想在最前面添加一个空选项：$(document).ready(function(){$.ajax({url:'<%=basePath%>analysis/getactivit.action', type:'post',success:function(data){var themecombo2 =[{ 'text':'请选择','id':''}];for(var i=0;i<data.length;i++){themecombo2.push({"text...
easyui清除dategrid所有数据(模拟本地加载)
$("#transitDetail").datagrid(‘loadData‘, { total: 0, rows: [] });reload,load方法效果同上来自为知笔记(Wiz)原文：http://www.cnblogs.com/funn0812/p/5500390.html
easyui-numberbox限定仅输入数字
许多必填项都涉及到数字，比如电话号码，身份证号这些要求用户在输入时只能输入数字。Easyui提供了数字框控件，允许用户只输入数字，<td> <input id="ssd" type="text" class="easyui-numberbox" data-options="precision:‘2‘" name="ssd" value="0" style="width:100px;" onkeyup="noNum(this)" /> </td>这是普通输入框，采用easyui-numberbox控件，经过测试发现，在输入法为英文输入法时，的确...
Easyui datebox 限制时间选择范围【代码】【图】
Require Date:<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style="width: 110px" id="StartTime"> To :<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style="width: 110px" id="EndTime">$(function () { //控件的初始限制$(‘#EndTime‘).datebox().datebox(‘calendar‘).calendar...
easyui datagrid单击单元格选择此列【代码】
示例代码实现单击jquery easyui datagrid的单元格时，取消datagrid默认选中高亮此行的样式，改为选中单击的单元格所在的列，高亮此列上的所有单元格。可以配置全局single变量，只允许同时选中一列，如果不配置则默认可以选中多列。单击选中的列会取消选中高亮样式。源代码如下，示例测试的easyui版本为1.3.5，如果没有效果，自己用firebug或者chrome开发工具找到数据容器的样式，修改代码对应的选择器。<table class="easyui-datag...
项目经历——EasyUI框架内 消息多发
时过境迁，身边的人会离开会改变，每个人都会在岁月摧残下渐渐，只有把自己遇到的困难给解决的时候，才是最美的时刻。问题描述： 在项目中，有一个发布消息的任务。原先做出来的是，任务发步接收部门职能选择一个，这样的逻辑很明显的是错误的，因为同样的任务内容，发布给不同的部门，这样就需要重复发送多次了。应该做成的是：同一个任务，如果发布给不同的接收部门，那么接收部门可以多选。涉及知识点： EasyUI 联动+...
连载：（三）循序渐进，通过XML配置，实现通用于WinForm（.Net）、WebForm（Asp.Net+JQuery+EasyUI）表单、报表--控制文件【图】
连载：（三）循序渐进，通过XML配置，实现通用于WinForm（.Net）、WebForm（Asp.Net+JQuery+EasyUI）表单、报表--XML控制文件作者：长江支流 本章，将给出控制文件相关类的C#.Net源代码，包括控制文件主控类WebMisController、以及控制文件的组成部分表单及清单过滤字段Field类、回调函数类CallbackFun。 控制文件控制文件由WebMIS.ServiceModel.WebMisController/ WebMisControllerSerializer类去描述和解析。 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享【代码】【图】
http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章 《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》 《使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享》《使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享》 我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法，每一个模块都有其共用性，细细理解与掌握，我相信使用EasyUI进行开发还...
普通js中获取easyui中分页信息（page,pageSize等）
对于datagrid，获取其分页信息: 方法： var pageopt = $(‘#list_data‘).datagrid(‘getPager‘).data("pagination").options； 变量pageopt就代表了一个pagination（分页对象） ，一般来讲，如果想获取 属性 ，都要通过options来操作。解读：datagrid("getPager")代表是那个datagrid，data("pagination")获取datagrid中的所有数据参数并找到名字叫"pagination"（分页），options代表获取分页中的所有参数。第几页(page):...