EASYUI - 技术教程文章

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, //是否...

easyui回车提交功能的实现

一、首先要input加validatebox验证,即input上要加  class="easyui-validatebox"及validType=""。二、logInputForm.find(‘input‘).on(‘keyup‘,function(event){  if(even.keyCode == ‘13‘){    logInputForm.submit();    }  });  logInputForm是form表单的id号,早期的版本不能使用on,而要使用bind。原文:https://www.cnblogs.com/yuanqisheng/p/13055400.html

扩展当easyui datagrid无数据时,显示特定值。如:没有数据 ----转载【代码】

var myview = $.extend({},$.fn.datagrid.defaults.view,{onAfterRender:function(target){$.fn.datagrid.defaults.view.onAfterRender.call(this,target);var opts = $(target).datagrid(‘options‘);var vc = $(target).datagrid(‘getPanel‘).children(‘div.datagrid-view‘);vc.children(‘div.datagrid-empty‘).remove();if (!$(target).datagrid(‘getRows‘).length){var d = $(‘<div class="datagrid-empty"></div>‘...

EasyUI 布局 - 动态添加标签页(Tabs)【代码】【图】

首先导入js<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"><link rel="stylesheet" href="../js/easyui/themes/icon.css"><script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script><script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>创建页面布局<p>This sample shows how to create a complex layout.</p><div style="margin: 20px 0;"></div><div cl...

easyui datebox 扩展清空按钮【代码】

/*** 给时间框控件扩展一个清除的按钮*/ $.fn.datebox.defaults.cleanText = ‘清空‘;(function ($) {var buttons = $.extend([], $.fn.datebox.defaults.buttons);buttons.splice(1, 0, {text: function (target) {return $(target).datebox("options").cleanText},handler: function (target) {$(target).datebox("setValue", "");$(target).datebox("hidePanel");}});$.extend($.fn.datebox.defaults, {buttons: buttons});})(...

jQuery EasyUI之EasyLoader使用

EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件 需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了。 比如需要加载linkbutton组件,则可以用下面的两种方式来加载: 第一种通过设置class来实现:   <a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a>   只要class设置了easyui-组件名,easyloader就会自动动态加载相应的组件 第二种通过脚本来实现:  ...

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图(八)【代码】

abp(net core)+easyui+efcore实现仓储管理系统目录abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一)abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三) abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)abp(net core)+easyui+efcore实现...

项目EasyUi和JS中遇到的问题总汇

最近由于项目用到EasyUi,以前只是听过,但是没有具体用过,只能一边学一边做,现在将做的过程中遇到的一些难点总结如下,以备后用: EsayUi使用: Json格式:key:value,key:value <body class="easyui-layout"> <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div...

easyui datagrid footer 页脚问题【代码】

mvc 的一个例子publicstring IndexV2(){var dataGridJson = new DataGridJson();var data = new List<MyClass11>{new MyClass11() { AuditUser="a"}, new MyClass11() { AuditUser="aa"}, new MyClass11() { AuditUser="bb"}};dataGridJson.rows = data;dataGridJson.total = 3;dataGridJson.footer = new List<MyClass11 >{ new MyClass11{ AuditUser = "cc" }};return JsonConvert.SerializeObject(dataGridJson);}publi...

jQuery EasyUI 在datagrid上使用combotree 进行多选【图】

datagrid本身有编辑功能,根据官方说明,在需要编辑的列上,加上editor 属性即可。具体的类型有以下几种: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 最近想利用combotree实现一个可以多选的树,途中遇到一些问题,放到这里分享一下: 1. 基本写法: editor="{type:‘combotree‘,options:{url:‘datagrid_data.json‘,multiple:true}}" 这里的type指的是编辑器类型,为了实现多选树,我们使用co...

easyui-tab href,content区别【代码】

easyUI的Tab面板是继承了panel说明:jsp主页面添加一个id为tab的div,要引入easyUI的相关js、css<div data-options="region:‘center‘"><div id="tab" class="easyui-tabs" fit="true"><div title="主页"></div></div></div> 第一种,使用content:/添加tab,这里有一个name属性function f_addTab(name,tabId,title,url){if ($("#tab").tabs(‘exists‘, tabId)) {$(‘#tab‘).tabs(‘select‘, tabId);// $(‘#‘+tabId).attr(‘...