easyui-属性详解
jquery-easy-ui解析

四、布局LAYOU
广州传智播客
4.1、EASYUI布局-LAYOUT
在easyui里面只有一种布局方式,layout(东、南、西、北、中)的布局方式, 创建layout布局的方式如下:
<div style="width: 500px; height: 700px;" class="easyui-layout"> <div data-options="region:'north'" style="height: 50px; width: 500px;">这 是一个北部面板</div> <div data-options="region:'south'" style="height: 50px">这是一个南部面 板</div> <div data-options="region:'west'" style="width: 100px">这是一个西部面板 </div> <div data-options="region:'east'" style="width: 100px">这是一个北东部面 板</div> <div data-options="region:'center'">这是一个中间面板</div> </div>
JQueryEasyUi(Tree树)详解(转)

JQueryEasyUi(Tree树)详解(转)第⼀讲:JQuery Easy Ui到底是什么呢?⾸先咱们知道JQuery是对Java Script的封装,是⼀个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
JQuery ui是在jQuery的基础上,利⽤jQuery的扩展性,设计的插件。
那么JQuery Easy Ui到底是什么呢?我的理解就是⽐JQuery ui更强⼤,同样都是实现绚丽的多功能效果!jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。
当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合,包括功能强⼤的 datagrid(数据⽹格)、treegrid(树形表格)、 panel(⾯板)、combo(下拉组合)等等。
⽤户可以组合使⽤这些组件,也可以单独使⽤其中⼀个。
其实就这么简单,对某个事物的定义,个⼈感觉没有什么固定的答案,只是那种答案更⽅便你的记忆,你记住的,它存在你深深的脑海⾥的,便是答案!JQuery Easy Ui插件列表如下:分类插件Base(基础)Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框Layout(布局)Panel ⾯板Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局Menu(菜单)与 Button(按钮)Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮Form(表单)Form 表单Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块Window 窗⼝Window(窗⼝)Window 窗⼝Dialog 对话框Messager 消息框DataGrid(数据⽹格)与Tree(树)Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树Treegrid 树形⽹格但是今天咱们只针对Tree(树)连接数据进⾏讲解!下⾯是它的⼀些基本的属性:id: 绑定到节点的标识值;text:显⽰⽂本;iconCls: 显⽰icon的css样式;checked: 节点是否选中;state: 节点状态, 'open' 或者 'closed';attributes: 绑定到节点的⾃定义属性;target: ⽬标 DOM 对象;children: ⼀个节点数组,定义⼀些⼦节点。
easy,ui,datagrid,表格属性

竭诚为您提供优质文档/双击可除easy,ui,datagrid,表格属性篇一:jqueryeasyuidatagrid数据表格jqueryeasyuidatagrid数据表格数据表格-datagrid内容继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值。
.数据表格显示的数据以表格的形式,并提供了丰富的选择,排序,分组和编辑数据的支持。
这个数据表格被设计以缩短开发时间,并要求开发商没有具体的知识。
它是轻量级的,功能丰富的。
单元格合并,多列标题,冻结列和页脚是其功能只是一小部分。
依赖组件(dependencies)布局-panel缩放-resizable链接按钮-linkbutton分页-pagination使用方法(usageexample)从现有的表单元素创建数据表格,定义在html中的行,列和数据。
通过标记创建的datagrid。
嵌套的标签定义的列的表。
使用javascript创建数据表格。
查询数据填充数据表格。
数据更改与服务器交互,刷新当前数据。
数据表格属性(datagridproperties)属性继承控制面板,以下是数据表格独有的属性。
篇二:jqueryeasyuidatagrid数据表格jqueryeasyuidatagrid数据表格扩展自$.fn.panel.defaults,用$.fn.datagrid.defaults重写了defaults。
依赖panelresizablelinkbuttonpagination用法数据表格(datagrid)的特性其特性扩展自panel,下列是为datagrid增加的特性。
列(column)的特性datagrid的column是一个数组对象,它的每个元素也是一个数组。
数组元素的元素是一个配置对象,它定义了每个列的字段。
代码示例:编辑器(editor)用$.fn.datagrid.defaults.editors重写了defaults。
jQueryEasyUI菜单与按钮详解

jQueryEasyUI菜单与按钮详解EasyUI 简介easyui是⼀种基于jQuery的⽤户界⾯插件集合。
easyui为创建现代化,互动,JavaScript应⽤程序,提供必要的功能。
使⽤easyui你不需要写很多代码,你只需要通过编写⼀些简单HTML标记,就可以定义⽤户界⾯。
easyui是个完美⽀持HTML5⽹页的完整框架。
easyui节省您⽹页开发的时间和规模。
easyui很简单但功能强⼤的。
代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>5、easyui 菜单与按钮</title><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css"><link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css"><script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script><script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script><script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script><script src="../../../js/crud/bus_pubuser.js"></script><script>$(function(){$(document).bind('contextmenu',function(e){$('#mm').menu('show', {left : e.pageY,top : e.pageX});return false;});});</script><script>$(function(){$(".dsbtn").linkbutton('disable');});</script></head><body><!--开始创建简单的菜单--><!--菜单默认是不显⽰的需要在javascript中调⽤显⽰--><div id="mm" class="easyui-menu" style="width: 150px;height: 120px;"><div>新建</div><div><span>打开</span><div style="width:150px;height: 120px;"><div>Word</div><div>Excel</div><div>PowerPoint</div></div></div><div data-options="iconCls:'icon-save'">保存</div><div class="menu-sep"></div><div>退出</div></div><!--结束创建简单的菜单--><!--开始创建链接按钮(Link Button)--><!--链接按钮(Link Button)实则是使⽤ <a> 元素来创建的。
jquery easyui 中文文档

目录1Accordion(可折叠标签) (3)1.1实例 (3)1.2参数 (4)2DateBox(日期框) (4)2.1实例 (4)2.2参数 (7)2.3事件 (7)2.4方法 (7)3ComboBox(组合框) (7)3.1实例 (7)3.2参数 (9)3.3事件 (10)3.4方法 (10)4Dialog(对话框) (10)4.1实例 (10)4.2参数 (12)4.3事件 (13)4.4方法 (13)5Messager(提示框) (13)5.1实例 (13)5.2方法 (16)5.3扩展 (17)6NumberBox(数字框) (17)6.1实例 (17)6.2参数 (18)7ValidateBox(验证框) (18)7.1实例 (18)7.2参数 (20)7.3方法 (20)7.4扩展 (20)8Pagination(分页) (21)8.1实例 (21)8.2参数 (22)8.3事件 (23)9Window(窗口) (23)9.1实例 (23)9.2参数 (26)9.3事件 (26)9.4方法 (26)10Panel(面板) (26)10.1实例 (26)10.2参数 (28)10.3事件 (29)10.4方法 (29)11Tabs(标签) (30)11.1实例 (30)11.2参数 (32)11.3事件 (32)11.4方法 (33)11.5标签面板属性 (33)12Tree(树) (33)12.1实例 (33)12.2参数 (36)12.3事件 (37)12.4方法 (37)13Layout(布局) (38)13.1实例 (38)13.2参数 (39)13.3方法 (39)14Datagrid(数据表) (39)14.1实例 (40)14.2参数 (43)14.3Column参数 (44)14.4事件 (45)14.5方法 (46)1Accordion(可折叠标签)1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">,并且将js代码全部去掉,效果图是一样的。
jqueryeasyui中文帮助文档

jqueryeasyui中文帮助文档Base基础Documentation文档每个easyui组件都有特性(property)、方法(method)和事件(event),用户可以很容易地扩展它们。
特性特性在jQuery.fn.{plugin}.defaults里定义。
例如,dialog的特性在jQuery.fn.dialog.defaults里定义。
事件事件(回调函数)也在jQuery.fn.{plugin}.defaults里定义。
方法方法在jQuery.fn.{plugin}.methods里定义。
每个方法有两个参数:jq和param。
第一个参数'jq'是必须的,它是指jQuery对象。
第二个参数'param' 是指传递给方法的真正的参数。
例如,给dialog组件扩展一个名叫'mymove' 的方法,代码看起来就像这样:1. $.extend($.fn.dialog.methods, {2. mymove: function(jq, newposition){3. return jq.each(function(){4. $(this).dialog('move', newposition);5. });6. }7. });现在你可以调用'mymove'方法把dialog移动到一个指定的位置:1. $('#dd').dialog('mymove', {2. left: 200,3. top: 1004. });Parser 解析器1.$.parser.parse(); // 解析整个页面2.$.parser.parse('#cc'); // 解析某个具体节点特性事件EasyLoader 加载器用法1. easyloader.base = '../'; // 设置easyui的基本路径2. easyloader.load('messager', function(){ // 加载指定的模块3. $.messager.alert('Title', 'load ok');4. });定义的语言环境afbgcacsdadeenfrnlzh_CNzh_TW事件Draggable 可拖拽用$.fn.draggable.defaults重写默认的defaults。
easyui (reading 'options')
easyui (reading 'options')
EasyUI是一款基于jQuery的UI组件库,包含了众多的前端UI组件,提供了丰富的UI控件的选项,方便开发人员进行快速的开发和实现。
下面我们来详细了解EasyUI中的控件选项:
1.属性(options)
EasyUI中大多数控件都支持options属性,该属性包含了组件的设置选项,可以实现组件的样式、布局等各方面的控制。
举个例子,在使用datagrid组件时,我们可以通过设置'columns'属性来控制表格中的列数、列名、列宽等。
2.方法(methods)
EasyUI组件具有多种可调用的方法,主要用于控制组件的行为。
例如在使用treegrid组件时,我们可以使用方法'collapseAll'来将树形结构全部收起,方便进行信息的查看。
3.事件(events)
EasyUI组件可以使用事件来响应用户的交互行为,例如在使用calendar组件时,我们可以使用onSelect事件来响应用户选择日期的行为。
4.扩展(extend)
EasyUI组件可以使用拓展来丰富控件的功能,例如在使用linkbutton
组件时,我们可以使用扩展属性iconCls来为按钮添加图标,增加视觉效果。
5.主题(theme)
EasyUI提供了多种配色主题用于美化页面,可以根据实际需求选择合适的主题进行使用。
要想在使用EasyUI中更加熟练掌握控件选项,需要对各个控件的设置选项有一个详细的了解。
同时,在实际使用过程中,也需要通过查看文档中提供的示例代码,深入理解控件的使用方法和属性选项。
easyui汇总
easyUI属性汇总属性分为CSS片段和JS片段。
CSS类定义:1、div easyui-window生成一个window窗口样式。
属性如下:1)modal:是否生成模态窗口。
true[是] false[否]2)shadow:是否显示窗口阴影。
true[显示] false[不显示]2、div easyui-panel 生成一个面板。
属性如下:1)title:该标题文本显示在面板头部。
2)iconCls:在面板上通过一个CSS类显示16x16图标。
3)width:设置面板宽度。
默认auto。
4)height:设置面板高度。
默认auto。
5)left:设置面板左边距。
6)top:设置面板顶部位置。
7)cls:在面板中增加一个Class类。
8)headerCls:在面板头部中增加一个Class类。
9)bodyCls:在面板内容中增加一个Class类。
10)style:在面板中增加一个指定样式。
11)fit:当True时设置该面板尺寸适合于它的父容器。
默认false。
12)border:当定义时显示面板边界。
默认true。
13)doSize:如果设置为True,该面板将重绘大小,并重建布局。
默认true。
14)collapsible:当定义时显示可折叠面板的按钮。
默认false。
15)minimizable:当定义时显示最小化面板的按钮。
默认false。
16)maximizable:当定义时显示最大化面板的按钮。
默认false。
17)closable:当定义时显示关闭面板的按钮。
默认false。
18)tools:自定义工具栏,每个工具都包含两个属性:iconCls、handler。
19)collapsed:当定义时该面板初始化时处于收缩状态。
默认false。
20)minimized:当定义时该面板初始化时处于最小化状态。
默认false。
21)maximized:当定义时该面板初始化时处于最大化状态。
默认false。
jquery-easy-ui解析
$("#myDiv").panel({ title: "js方式的panel", width: 300, height: 500, fit: true, border: true, content: "设置面板内", )}
<div style="width:300px;height:500px" class="easyui-panel" title="第一个面板" iconCls="icon-save" collapsible="true"> </div>
1.3、DATA-OPTIONS属性
我们在写 "iconCls"这种属性的时候编辑器会提示错误,easyui提供 data-options属性给我来写组件的配置如下面代码
我们需要引入3个基本的文件
<script src="../easyui/jquery-1.8.0.min.js"></script> <script src="../easyui/jquery.easyui.min.js"></script> <link href="../easyui/themes/default/easyui.css" rel="stylesheet" />
easyui版helloworld我们在写easyui的js代码的时候也需要dom树生成后也就是说我们需要写function这个方法二内容组件二内容组件2121panelpanel面板面板panel面板是easyui里面非常基础的一个内容组件在我们后期学的tabs选项卡accordion手风琴这两种内容组件都依赖于panel组件
jquery-easyui中文详细说明文档完整
Jquery easyui 使用说明1. Layout 布局 (1)1.1. 样图 (1)1.2. 示例代码 (2)2. tabs面板 (3)2.1. 样图 (3)2.2. 示例代码 (3)3. jQuery EasyUI 提示框(Messager)用法 (5)3.1. 样图 (5)3.2. 示例代码 (5)4. 分页(Pagination)用法 (6)4.1. 样图 (7)4.2. 示例代码 (7)5. jQuery EasyUI 对话框(Dialog)用法 (8)5.1. 示例图片 (8)5.2. 示例代码 (8)6. jQuery EasyUI 窗口(Window)用法 (9)6.1. 样图 (10)6.2. 示例代码 (10)7. jQuery EasyUI 验证框(V alidateBox)用法 (11)7.1. 样图 (11)7.2. 示例代码 (11)8. jQuery EasyUI 数字框(NumberBox)用法 (13)8.1. 样图 (13)8.2. 示例代码 (13)9. DataGrid (13)yout 布局1.1. 样图UsageMarkup在div 里面加载布局的方法:class="easyui-layout"布局面板必需要有一个'center' 面板.1.2. 示例代码<div id="cc" style="width:600px;height:400px;" class="easyui-layout"><div region="north" title="North Title" split="true" style="height:100px;"></div><div region="south" title="South Title" split="true" style="height:100px;"></div><div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div><div region="west" split="true" title="West" style="width:100px;"></div><div region="center" title="center title" style="padding:5px;background:#eee;"></div></div>jQuery$('#cc').layout(options);DependenciespanelresizableOptionsLayout Panel Options所有属性都是放在<div/>标签里面null标题名字,当写了名字后将会产生折叠图标false booleanTrue时,面板间将产生一个拖动条可改变面板间大小在面板头部显示图标的CSSnull 将在布局面板中产生一个图标如:icon="icon-reload"fit="true" 自动改变大小Methods2.tabs面板2.1. 样图2.2. 示例代码在<div/>标签里使用方法class="easyui-tabs"UsageMarkup<div id="tt" style="width:500px;height:250px;" class="easyui-tabs"><div title="Tab1" style="padding:20px;display:none;">tab1</div><div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> tab2</div><div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> tab3</div></div>jQueryTo create a tabs container$('#tt').tabs(options);To add a tab panel:$('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true});DependenciesnoneOptionsTabs ContainerOverride defaults with $.fn.tabs.defaults.PropertiesEvents方法标签面板属性3.jQuery EasyUI 提示框(Messager)用法jQuery EasyUI 提示框(Messager)不仅重写了window默认的alert,confirm和prompt,而且还增加一些在页面右下角显示的提示框。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jquery_easyui_中文解析最近经常接触easyui,但是easyui官网又总是上不去,所以在网上搜罗了easyui 的中文解析,以备查询。
CSS类定义:div easyui-window window窗口样式属性如下:1)modal:是否生成模态窗口。
true[是] false[否]2)shadow:是否显示窗口阴影。
true[显示] false[不显示]div easyui-panel 面板属性如下:1)title:该标题文本显示在面板头部。
2)iconCls:在面板上通过一个CSS类显示16x16图标。
3)width:设置面板宽度。
默认auto。
4)height:设置面板高度。
默认auto。
5)left:设置面板左边距。
6)top:设置面板顶部位置。
7)cls:在面板中增加一个Class类。
8)headerCls:在面板头部中增加一个Class类。
9)bodyCls:在面板内容中增加一个Class类。
10)style:在面板中增加一个指定样式。
11)fit:当True时设置该面板尺寸适合于它的父容器。
默认false。
12)border:当定义时显示面板边界。
默认true。
13)doSize:如果设置为True,该面板将重绘大小,并重建布局。
默认true。
14)collapsible:当定义时显示可折叠面板的按钮。
默认false。
15)minimizable:当定义时显示最小化面板的按钮。
默认false。
16)maximizable:当定义时显示最大化面板的按钮。
默认false。
17)closable:当定义时显示关闭面板的按钮。
默认false。
18)tools:自定义工具栏,每个工具都包含两个属性:iconCls、handler。
19)collapsed:当定义时该面板初始化时处于收缩状态。
默认false。
20)minimized:当定义时该面板初始化时处于最小化状态。
默认false。
21)maximized:当定义时该面板初始化时处于最大化状态。
默认false。
22)closed:当定义时该面板初始化时处于关闭状态。
默认false。
23)href:一个url,加载远程数据并显示在面板中。
24)loadingMessage:当加载远程数据时,在面板中显示一个消息。
默认Loading…事件如下:1)onLoad:当远程数据加载完毕后激活。
2)onBeforeOpen:当面板打开前激活。
3)onOpen:当面板打开后激活。
4)onBeforeClose:当面板关闭前激活。
5)onClose:当面板关闭后激活。
6)onBeforeDestroy:当面板销毁前激活。
7)onDestroy:当面板销毁后激活。
8)onBeforeCollpase:当面板收缩前激活。
9)onCollapse:当面板收缩后激活。
10)onBeforeExpand:当面板扩展前激活。
11)onExpand:当面板扩展后激活。
12)onResize:当面板重绘后激活。
width:新建的外部宽度height:新建的外部高度13)onMove:当面板移动后激活。
left:左侧新位置。
top:顶部新位置。
14)onMaximize:当窗口最大化后激活。
15)onRestore:当窗口恢复到原来大小时激活。
16)onMinimize:当窗口最小化后激活。
方法如下:1)options:返回options属性。
2)panel:返回面板对象。
3)header:返回面板头部对象。
4)body:返回面板主体对象。
5)setTitle:设置头部的标题文本。
6)open:当forceOpen参数设置为true时,面板打开时绕过onBeforeOpen回调函数。
7)close:当forceClose参数设置为true时,该面板关闭时绕过onBeforeClose回调函数。
8)destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。
9)refresh:当href属性设置后刷新该面板以加载远程数据。
10)resize:设置面板的大小和布局。
该options对象包含以下属性:width:新的面板宽度。
height:新的面板高度。
left:新的面板左侧位置。
top:新的面板顶部位置。
11)move:移动面板到一个新的位置。
该options对象包含以下属性:left:新的面板左侧位置。
top:新的面板顶部位置。
a easyui-linkbutton 链接类型的按钮属性如下:1)disabled:当True时禁用该按钮。
默认false。
2)plain:当True时显示一个普通效果。
默认false。
input/textarea easyui-validatebox 字段验证属性如下:1)required:true[必需] false[不必需] 默认false2)validType:a、length[a,b] 字段长度控制在a至b之间。
b、email 验证Email。
c、url 验证网络地址。
3)missingMessage:当文本时出现空时弹出该工具提示,系统有默认[英文],自定义可覆盖它。
4)invalidMessage:当文本内容无效后弹出该工具提示,系统有默认[英文],自定义可覆盖它。
ul easyui-tree 树形结构属性如下:5)url:一个获取远程数据的地址。
6)animate:当展开或折叠节点时是否定义动画效果。
true[是] false[否]默认false节点属性如下:1)text:节点的显示文本。
2)id:节点ID,对于加载远程数据时非常重要。
3)state:节点状态,'open'或'closed',默认为'open'。
当设置为'关闭',该节点包含子节点,并4)attributes:为节点添加自定义属性。
5)children:以数组节点的方式定义一些字节点。
事件如下:1)onClick:当用户点击一个节点时激活,该节点参数包含如下属性:2)id:节点ID3)text:节点文本4)attributes:节点自定义属性。
5)target:目标点击的DOM对象。
6)onLoadSuccess:当数据成功加载数据时激活,该参数跟jQuery.ajax的'success'函数效果相同。
7)onLoadError:当数据加载数据失败时激活,该参数跟jQuery.ajax的'error'函数效果相同。
方法如下:1)reload:重新加载树数据。
2)getSelected:获取选中的节点并返回它,如果没有选择节点将返回null。
3)collapse:折叠一个节点,该目标参数是该节点的DOM对象。
4)expand:展开一个节点,该目标参数是该节点的DOM对象。
5)append:在一个父节点追加一些子节点。
param有两个属性:parent:DOM对象,把它作为父节点追加(它们)。
data:array,或者节点数据。
6)remove:删除它以及它以下的子节点,该目标参数是该节点的DOM对象。
table easyui-datagrid 表格属性如下:7)title:该DataGrid面板的标题文本。
8)iconCls:一个CSS类,将提供一个背景图片作为标题图标。
9)border:当true时,显示该datagrid面板的边框。
10)width:面板宽度,自动列宽。
11)height:面板高度,自动列高。
12)columns:该DataGrid列配置对象,查看column属性可获取更多信息。
13)frozenColumns:跟Columns属性相同,但是这些列将会被固定在左边。
14)striped:当true时,单元格显示条纹。
默认false。
15)method:通过该方法类型请求远程数据。
默认post。
16)nowrap:当true时,显示数据在同一行上。
默认true。
17)idField:说明哪个字段是一个标识字段。
18)url:一个URL,从远程站点获取数据。
19)loadMsg:当从远程站点加载数据时,显示一个提示信息。
默认"Processing,please wait …"。
自定义覆盖。
20)pagination:当true时在DataGrid底部显示一个分页工具栏。
默认false。
21)rownumbers:当true时显示行号。
默认false。
22)singleSelect:当true时只允许当前选择一行。
默认false。
23)fit:当true时,设置大小以适应它的父容器。
默认fals e。
24)pageNumber:当设置分页属性时,初始化的页码编号。
默认从1开始25))pageSize:当设置分页属性是,初始化的页面大小。
默认10行26)pageList:当设置分页属性时,初始化页面的大小选择清单。
默认[10,20,30,40,50]27)queryParams:当请求远程数据时,也可以发送额外的参数。
28)sortName:定义哪列可以排序。
29)sortOrder:定义列的排列顺序,只能是'asc'或'desc'。
默认asc。
Column属性如下:1)title:该列标题文本。
2)field:该列对应的字段名称。
3)width:列宽。
4)rowspan:说明该单元格需要多少行数。
5)colspan:说明该单元格需要多少列数。
6)align:说明Column数据的对齐方式。
'left','right','center' 都可以使用。
7)sortable:当true时,允许该列进行排序。
8)checkbox:当true时,允许该列出现checkbox。
事件如下:1)onLoadSuccess:当远程数据加载成功是激活。
2)onLoadError:当远程数据加载发现一些错误时激活。
3)onClickRow:当用户点击某行时激活,参数包含:rowIndex: 点击的行索引,从0开始。
rowData: 点击行时对应的记录。
4)onDblClickRow:当用户双击某行时激活,参数包含:rowIndex: 点击的行索引,从0开始。
rowData: 点击行时对应的记录。
5)onSortColumn:当用户对某列排序时激活,参数包含:sort:排序字段名称。
order:排序字段类型。
6)onSelect:当用户选择某行时激活,参数包含:rowIndex: 点击的行索引,从0开始。
rowData: 点击行时对应的记录。
7)onUnselect:当用户取消选择某行时激活,参数包含:rowIndex: 点击的行索引,从0开始。