EASYUI - 技术教程文章

EasyUI-Datagrid行内编辑【图】

接上一篇,这次介绍easyUI的datagrid的行内编辑单元格的功能。 关于行内编辑,我之前写过一个demo 《jQuery:页面可编辑表格》,但是easyui 中早已经封装了行内单元格编辑的功能,我们在调用时只需要使用人家封装好的方法就行。这里就使用封装好的方法。实现思路: 1.定义table 时写上监听单击事件的方法:onClickCell:onClickCell; 2.将需要编辑的<th>和<td>设置编辑的触发响应:editor:‘text‘。其中text只是它...

easyUI Layout自适应【代码】

//设置自适应浏览器宽度和高度function setLayoutHeight() {var height = $(window).height() - 20;$("#main_layout").attr("style", "width:100%;height:" + height + "px");$("#main_layout").layout("resize", {width: "100%",height: height + "px"}); }//js或jQuery获取当前屏幕的各种高度Javascript:网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bod...

jQuery easyui 绑定下拉框控件 从数据库获取数据 MVC controller传值过去

这是在做OA系统的时候,需要用到的一个小功能,比较通用的,因为本人也是才接触easyui不久,希望有错的地方大家指出来,谢谢//界面 用的easyui-combobox <td><label for="lab_con_id">服务合同编号:</label></td> <td><input class="easyui-combobox" data-options="required:false" name="lab_con_id" id="lab_con_id"></td>//js$(function(){  //转到后台,查询出数据,将数据绑定  ajaxHelper(‘/L...

[转]easyui 全部图标【代码】

原文地址:http://blog.163.com/shexinyang@126/blog/static/136739312201491011492263/拿jquery-easyui-1.2.6举例所有的图标在哪,如何引用, 所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用jquery-easyui-1.2.6/themes/icon.css 1 .icon-blank{2background:url(‘icons/blank.gif‘) no-repeat;3 }4.icon-add{5background:url(‘icons/edit_add.png‘) no-repeat;6 }7.icon-edit{8background:...

js实现EasyUI-datagrid前台分页

牛腩新闻发布系统中讲到过两种分页的方式:真分页与假分页 这两种分页方式是怎么回事呢?所谓真分页就是从数据库中查询出需要展示的条数,比如10条,下次我再要展示25条的时候它再次访问数据库,查询前25条过来。这样有什么好处呢?减少了数据的传输量提高了第一次查询的速度。适合数据量大的查询。假分页呢?它一次请求后将数据库中所有符合条件的数据返回到前台,然后再查询前25条时它直接将所有数据的前25条展示出来。这样...

JS--easyui通用验证【代码】

// JavaScript Document $.extend($.fn.validatebox.defaults.rules, {Composite_validation:{validator: function (value, param) {var mReg = new RegExp(param[0]); //传递过来的正则字符串中的"\"必须是"\\" if (!mReg.test(value)) {$.fn.validatebox.defaults.rules.Composite_validation.message = param[1];returnfalse;}else {var postdata = {};postdata[param[3]] = value;var result = $.ajax({url: param[2],data: p...

jquery - easyui - 分页【图】

datagrid 【表格分页】var orderDataGrid = $("#orderDataGrid").datagrid({ width : "auto", height : "auto", idField : "memberid", //【主键】 url : "${pageContext.request.contextPath}/orderweb/getOrderList", //【获得数据接口】 columns : [[ ...

关于EasyUI中DataGrid控件的一些使用方法总结

一,DataGrid 控件的工作流程  1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板  2,Datagrid模板通过制定的Url发送请求,获取数据 3,Datagrid通过后台返回的Json将对应的数据按照Filed的名字进行匹配并显示知道了这个流程那么,那么我们对整个的使用基本上有了百分之80的了解了在第三步中,Datagrid会向后台发送一个请求,该请求是按照之前创建Datagrid时制定的url来访问的,并且会自动添加两个...

Easyui Tree方法扩展 - getLevel(获取节点级别)【代码】

//扩展方法 $.extend($.fn.tree.methods, {getLevel:function(jq,target){var l = $(target).parentsUntil("ul.tree","ul");return l.length+1;} });//用法var node = $().tree("getSelected"); var lv = $().tree("getLevel",node.target); 原文:http://www.cnblogs.com/hubing/p/4032828.html

easyui datagrid 列拖动

实现代码-code<script type="text/javascript"> $.extend($.fn.datagrid.methods, { columnMoving: function(jq) { return jq.each(function() { var target = this; var cells = $(this).datagrid(‘getPanel‘).find(‘div.datagrid-header td[field]‘); cells.draggable({ revert: true, cursor: ‘pointer‘, edge: 5, proxy: function(source) { var p = $(‘<div class="tree-n...

easyui taps 插件 增加新选项卡参数content配置问题【代码】

自己工作中在遇到的问题,只是自己记录,只是部分代码,可能你也遇到类似问题,虽然表述不是很严谨周到,类似问题可以参考下。function addTab(subtitle, url, icon, id) { //增加选项卡函数 if (!$(‘#tabs‘).tabs(‘exists‘, subtitle)) { $(‘#tabs‘).tabs(‘add‘, { title : subtitle, content : createFrame(id,url), //选项卡内容参数,用的是函数返回值,函数定义在下面 ...

Jquery easyui datagrid 导出Excel【代码】【图】

datagrid的扩展方法,用于将当前的数据生成excel需要的内容。 1 <script>2/**3 Jquery easyui datagrid js导出excel4 修改自extgrid导出excel5 * allows for downloading of grid data (store) directly into excel6 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,7 * converts to Base64, then loads everything into a data URL link.8 ...

EasyUI datagrid 实现标题居中,内容居左的方法【代码】

源码中内容:cell.css("text-align",(col.halign||col.align||"")); 这里有个属性挺眼熟 : col.align 前面还有一个: col.halign 可以使用此属性实现该功能。代码如下: <th data-options="field:‘title‘, width:400,align:‘left‘ , halign: ‘center‘">标题</th> 其中 align:‘left‘ 控制内容居左 , halign: ‘center‘ 控制标题居中。 原文:http://www.cnblogs.com/chenliang-zibo/p/4446472.html

easyui使用总结

(一)datagrid1.jquery的easyui中的datagrid刷新时的问题    在你的页面里增加2个class样式: .datagrid-mask{    opacity:0;    filter:alpha(opacity=0);    }    .datagrid-mask-msg{    opacity:0;    filter:alpha(opacity=0);    }    就能将刷新动画去掉~  2.jquery的easyui中的datagrid刷新时的问题原文:http://www.cnblogs.com/sunrunzhi/p/5085399.html

jquery easyui 全部图标

所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用jquery-easyui-1.2.6/themes/icon.css.icon-blank{background:url(‘icons/blank.gif‘) no-repeat;}.icon-add{background:url(‘icons/edit_add.png‘) no-repeat;}.icon-edit{background:url(‘icons/pencil.png‘) no-repeat;}.icon-remove{background:url(‘icons/edit_remove.png‘) no-repeat;}.icon-save{background:url(‘icons/filesave...

easyui在java-itoo的管理流程【图】

easyui是一款成熟的前台框架,但如何保证对一个庞大系统的各个页面样式进行统一的管理呢?针对此问题,我为大家提供一种解决思路。用ftp服务器管理easyui源码 用HttpFileServer_V2.3beta279_随波汉化版在24.46:9000上创建ftp服务器; 把easyui源码的解压缩文件上传到ftp服务器;基于easyui开发自定义的easyui.war 引用46ftp服务器上的easyui源码开发自定义itoo-easyui.war; 创建itoo-easyui.war项目 创建自定义的j...

easyui datagrid 分页【代码】

//初始化dategrid $(‘#tt‘).datagrid({ url:null, pagination:true, pageSize:20, pageNumber:1, rownumbers:true }); $(‘#tt‘).datagrid(‘getPager‘).pagination({ displayMsg:‘当前显示从 [{from}] 到 [{to}] 共[{total}]条记录‘, onSelectPage : function(pPageIndex, pPageSize) { //改变opts.pageNumber和opts.pageSize的参数值,用于下次查询传给数据层查询指定页码的数据 var gridOpts =...

【EasyUi DataGrid】批量删除【图】

DataGrid是我们做网页经常使用到的组件之中的一个,对它的操作也无非是增删改查操作。单条数据的增删改相对来说比較简单。添加、改动能够直接在DataGrid中进行,也能够用弹出框的形式把数据装载在文本框等各种控件中呈现给用户,让用户自己主动填写或改动。删除的事稍后再说。个人觉得“查”是最难的。由于它涉及到了表格的各种载入问题等等。假设你觉得这是危言耸听。那就我的期待兴许博客吧! 不知道上边在说什么的能够忽略...

EasyUI combogrid/combobox过滤时限制只能选择现有项【代码】

EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下。 在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误。比如idField是int型的,输入的数据通过是检索textField,并非int型,无法提交到后台。如果直接禁止输入,在选项多的时候就很难快速选择了。现在的解决方案是通过多个事件来判断是否输入了不存在的项目:$("...

给EasyUi的Form加入自己主动填充部分输入框的方法

依据项目须要,基于获取的数据对Form的部分输入框进行填充,而默认的EasyUI的Form 没有该方法。仅仅能一个输入框一个输入框的直接赋值,为此添加了Form对象的setValues,实现依据给定的Id来填充的功能。代码例如以下:$.extend($.fn.form.methods, {setValues: function (myself, data) {var form = $(myself);var opts = $.data(form[0], "form").options;var cols = "," + data.items + ",";for (var name in data.row) {if (col...

EasyUI datebox 只读和取值【代码】

<input id="dd" type="text" class="easyui-datebox" required="required" ></input> <asp:Button ID="Button1" runat="server" Text="Button" /> $("#Button1").click(function () {$("#dd").datebox("setValue", "7/1/2012");//设置默认值// var a= $("#dd").datebox("getValue");//取值}); 原文:http://www.cnblogs.com/wwz-wwz/p/6082283.html

jquery easyui-datagrid/treegrid 清空数据参考【代码】【图】

在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义。下面给出两种方法供初学者参考:  方法一:var item = $(‘#filegrid‘).datagrid(‘getRows‘); if (item) {for (var i = item.length - 1; i >= 0; i--) {var index = $(‘#filegrid‘).datagrid(‘getRowIndex‘, item[i]);$(‘#filegrid‘).datagrid(‘delete...

EasyUI实现tabs组件IFrame模式的遮罩效果【代码】【图】

需求分析在jQuery Easyui框架中,大多使用url方式(即ajax方式)加载数据的话,都设计了“等待中效果”或者“遮罩效果”。但是实际应用中,并不一定只有ajax方式才需要这些效果,最常见的IFrame其实也需要这种效果,而tabs是使用IFrame频率最高的组件了,本文就来实现tabs组件IFrame模式的遮罩效果寻找奠基石跟ajax不同,IFrame没有请求成功后的回调函数,要实现遮罩的话,我们必须知道在何时关闭遮罩,所以必须能够监控到IFrame是否...

Easyui主从表设计【代码】【图】

js代码:// 全局变量var loading; var grid; var mainGrid; var dlg_Edit; var dlg_Edit_form; var virpath = ""; //网站的虚拟目录 如:/ShopManagervar permissions; var addPermissionName = ‘City_Add‘.toLowerCase(); var editPermissionName = ‘City_Edit‘.toLowerCase(); var delPermissionName = ‘City_Delete‘.toLowerCase(); var savePermissionName = ‘City_Save‘.toLowerCase(); var exportPermissionName = ‘...

EasyUI - DataGrid 组建 - [ 排序功能 ]【代码】【图】

效果:红框的字段看,为设置了,列排序,向后台Post数据sort/order。 原理:向后台POST数据,sort/post数据。 html代码: <table id="tab"></table> JS代码:$(function () {$(‘#tab‘).datagrid({width: 500,//宽度title: ‘信息列表‘,//标题名iconCls: ‘icon-search‘,//图标singleSelect: true,//是否单选striped: true,//是否开启斑马线//============================= 加载数据,要显示的字段 ===============...

在EasyUI项目中使用FileBox控件实现文件上传处理【代码】【图】

我在较早之前的随笔《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是Jquery+Flash实现文件的上传处理,HTML5收费版本的没有试过。随着Flash逐渐退出整个环境,很多浏览器都可能不再支持Flash的了,因此在更新原有EasyUI整个框架的时候,我们对框架全面进行了完善,包括替换了这个Uploadify的文件上传模块,使用EasyUI内置的FileBox控件,结...

yii2 easyui ueditor【代码】【图】

基于yii2编辑富文本效果图 步骤1、下载yii2-ueditor(git 最新版)2、将下载好的文件解压 cnblogsfiles-yii2_ueditor/ ueditor 这个文件夹放在根目录 common/widgets/里面 3、对应控制器的代码public function actions(){return [‘ueditor‘=>[‘class‘ => ‘common\widgets\ueditor\UeditorAction‘,‘config‘=>[//上传图片配置‘imageUrlPrefix‘ => "", /* 图片访问路径前缀 */‘imagePathFormat‘ => "/upload/image/{yyyy}...

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装【代码】【图】

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装   ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 前言:前面几篇博客我们基本已经介绍完了搭建整个项目和数据库访问层以及一些业务逻辑层的实现,当然了,我们的数据库访问层这样还是可以在进行封装的,但是我到这里就行了吧,项目也不大,不需要那么麻烦的,那么我们今天开始介绍我...

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、checkbox、tree、datagrid等等总之是关于基本表单控件、树和一些图表统计的应用,当然,还有一些后台数据库的连接使用。当时几乎都在学着怎么用,竟然没有去仔细深入思考关于jQuery,并且对在头部(head中)引入的一些诸如jquery-1.4.4.min.js 文件也没有太大感觉。果然,在自己需要用jQuery做前端的时候一顿...

[jQuery EasyUI系列] 创建增删改查应用【代码】【图】

一、数据收集并妥善管理数据是网络应用共同的必要。CRUD允许我们生产页面列表并编辑数据库记录。本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid.将使用到的插件有: datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息二、操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息 创建没有JavaScript代码的DataGrid 1<table id="dg" title=...