easy UI 注意事项

1.多次使用按钮button。

<div id="buttons">
    <a id="save_channelD" href="javascript:void(0);"
       class="easyui-linkbutton" data-options="width:70"
       onclick="javascript:savechannelD();">保存</a> &nbsp;&nbsp;
</div>

不要加 data-options="width:70”   。应为给其设置宽度后,easy UI会把其作为流式布局,相对于父级定位,各个按钮会表现奇葩。
easy UI 原文定义:
Fluid LinkButton

This example shows how to set the width of LinkButton to a percentage of its parent container.

链接地址:http://www.jeasyui.net/demo/364.html

2.easyui-datagrid不要重复设置 data-options=“url:…” 和  $(‘#bank_dg‘).datagrid({url: ‘..’}) ,会报错。

<table id="bank_dg" title="" class="easyui-datagrid" style="width:100%;">
    <thead>
    <tr>
        <th data-options="field:‘plaName‘,width:40,align:‘center‘">平台名称</th>
        <th data-options="field:‘bankName‘,width:40,align:‘center‘">银行名称</th>
        <th data-options="field:‘bankOpening‘,width:40,align:‘center‘">开户行</th>
        <th data-options="field:‘bankAccount‘,width:40,align:‘center‘">银行账号</th>
        <th data-options="field:‘stockAmount‘,width:40,align:‘center‘">库存金额</th>
        <th data-options="field:‘stockBalance‘,width:40,align:‘center‘">在库余额</th>
        <th data-options="field:‘warningAmount‘,width:40,align:‘center‘">预警金额</th>
        <th data-options="field:‘createTime‘,width:40,align:‘center‘">建档时间</th>
        <th data-options="field:‘refreshTime‘,width:40,align:‘center‘">更新时间</th>
    </tr>
    </thead>
</table>

3. easyui-combobox  ,easyui-datetimebox  类型获取值于一般的$().val();不同,有各自的方法:

$(‘#sex‘).combobox(‘getValue‘),
$(‘#InDate‘).datetimebox(‘getValue‘),        

4.清空easy UI输入框 easyui-textbox 的值或下拉选择框 easyui-combobox 的值。

用$().val(“ “),可以出发清空,但是easy UI有记忆回填机制,当你只是设置为空时,它会于上一次离开出发blur事件时的值对比,如果不同把原来的值回填。所以你会发现,原来以为清空的值再次点击时,之前清空的值有神奇的再现了。。。

$("#channelNo").val("");//清空
$("#channelNm").val("");//清空

这么写好与效果???why????

这与easy UI 的demo结构有关。所填非所见。

基于这种渲染结构,改为如下:

$("#channelNo").parent().find("input").val("");//清空
$("#channelNm").parent().find("input").val("");//清空

很好点击清空按钮,输入框内容清空了。

但是,在你再次点击此清空后的输入框时,之前清空的内容继续回填了???

很简单,用easy UI的方式对其设置,就没问题了。

    function resetQuery(){
         $("#channelNo").textbox(‘setValue‘,‘‘)//赋值
         $("#channelNm").textbox(‘setValue‘,‘‘)//赋值
         $("#channelType").combobox(‘setValue‘,‘‘);
     }

5.easy  UI input 取值赋值。

$("#userdlg_useraccount").textbox(‘resize‘,‘140px‘);//设置宽度
$("#userdlg_useraccount").textbox(‘readonly‘,false);//设置可读
$("#userdlg_useraccount").textbox(‘readonly‘,true);//设置只读
var val = $("#userdlg_useraccount").textbox(‘getValue‘)//取值
$("#userdlg_useraccount").textbox(‘setValue‘,‘外星人‘)//赋值 
时间: 2024-08-05 11:10:03

easy UI 注意事项的相关文章

jQuery Easy UI的使用

一.初步认识 1.什么是jQuery Easy UI jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面. 官方网站http://www.jeasyui.com 2.jQuery EasyUI有哪些特点 (1).基于 jquery 用户界面插件的集合: (2).源代码加密.商业版付费 (3).使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTM

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准

JQUERY EASY UI +TREE +SERVLET 显示菜单的例子

1.准备工作 (1)jquery easy ui (2)mysql数据 (3)eclipse开发环境等等 2.开发前端 <body class="easyui-layout"> <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;"><div clas

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

jQuery Easy UI Resizable(调整大小)组件

Resizable(调整大小)组件,easyui基础组件之一,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件,使用比较简单,相关的属性.事件都 在例子中介绍了. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/jav

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

jQuery Easy UI LinkButton(按钮)组件

LinkButton(按钮)组件,easyui基础组件之一 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></s

jQuery Easy UI ProgressBar(进度条)组件

ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas