轻巧学习jQuery插件EasyUI

作者: 网络应用  发布:2019-09-03

正文实例陈诉了经过 jQuery EasyUI框架创制三个PAJEROSS阅读器,分享给大家供大家参谋。具体如下:
运行效果截图如下:

原来的书文地址 作品日期:二〇〇七/09/04

图片 1

新组件Gird包罗了非常多的类和继承方法。假使读者不是太熟识的面向对象开荒来讲,大概会对多个变量怎么样从某些类得到后续的格局感觉猜疑,用起GIEscortD来认为困难。在YAHOO.ext.gird包中,大多数类是布署改为“即插即用plug and play”的,可扩大的extended和可自定义的customized,能以最少些的代码插入轻易到web程序中。

咱俩将利用以下插件:
layout:成立应用的客户分界面。
datagrid:显示 RSS Feed 列表。
tree:显示 feed 频道。
手续 1:创立布局(Layout)

要测量检验和开创三个实现gird的楷模,小编主宰做四个差不离的,唯有一页的LX570SS种子收罗器812 SuperfastSS Feed Viewer。整个程序写了100行代码而内部有20行是有关gird的。那个模范表达了gird的部分杰出作用,如Ajax loading,预管理(preprocessing)和自定义渲染(custom rendering)

<body class="easyui-layout">
 <div region="north" border="false" class="rtitle">
 jQuery EasyUI RSS Reader Demo
 </div>
 <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
 <ul id="t-channels" url="data/channels.json"></ul>
 </div>
 <div region="center" border="false">
 <div class="easyui-layout" fit="true">
  <div region="north" split="true" border="false" style="height:200px">
  <table id="dg" 
   url="get_feed.php" border="false" rownumbers="true"
   fit="true" fitColumns="true" singleSelect="true">
   <thead>
   <tr>
    <th field="title" width="100">Title</th>
    <th field="description" width="200">Description</th>
    <th field="pubdate" width="80">Publish Date</th>
   </tr>
   </thead>
  </table>
  </div>
  <div region="center" border="false" style="overflow:hidden">
  <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
  </div>
 </div>
 </div>
</body>

这里嵌入了个Mini型程序(用iframe)

手续 2:数据网格(DataGrid)处总管件

自己一步一步手把手带您进去GI揽胜极光D,还或然会援助什么是重大的地点,哪些不是。

在这里大家要管理部分由客户触发的风云。

Step 1 制造柱模型ColumnModel

$('#dg').datagrid({
 onSelect: function(index,row){
 $('#cc').attr('src', row.link);
 },
 onLoadSuccess:function(){
 var rows = $(this).datagrid('getRows');
 if (rows.length){
  $(this).datagrid('selectRow',0);
 }
 }
});
var myColumns = [
  {header: "Title", width: 350, sortable: true}, 
  {header: "Date", width: 125, sortable: true, renderer: formatDate}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

本实例使用 'onSelect' 事件来体现 feed 的剧情,使用 'onLoadSuccess' 事件来抉择第一行。
步骤 3:树形菜单(Tree)处监护人件

G途乐ID从柱模型中获得某一列的音信。在这一个例子我们调用一个默许的柱模型(称DefaultColumnModel),三个包括全部有关的新闻的目的。对象的特性如下:

当树形菜单(Tree)数据现已加载,大家须要选取第三个叶子节点,调用 'select' 方法来摘取该节点。 使用 'onSelect' 事件来收获已选用的节点,那样我们就能够得到相应的 'url' 值。 最终大家调用数据网格(DataGrid) 的 'load' 方法来刷新 feed 列表数据。

  • header: - 表头
  • width: - 宽度
  • sortable: - true=可排序
  • renderer: - 钦定渲染格局。调用函数参数为 (value, rowIndex, columnIndex),并由函数重回(return)值来体现到单元格cell中。
  • sortType: - 钦赐排序方式。参见文档资料,有5到6种的调换形式。
$('#t-channels').tree({
 onSelect: function(node){
 var url = node.attributes.url;
 $('#dg').datagrid('load',{
  url: url
 });
 },
 onLoadSuccess:function(node,data){
 if (data.length){
  var id = data[0].children[0].children[0].id;
  var n = $(this).tree('find', id);
  $(this).tree('select', n.target);
 }
 }
});

除header和width另外为可选的

如上就是关于EasyUI创立PAJEROSS Feed阅读器的连锁课程,希望对我们的学习抱有帮助。

创建DataModel数据模型

你或者感兴趣的稿子:

  • Python实现的大切诺基SS阅读器实例
  • 用Python的Django框架来营造二个福特ExplorerSS阅读器
  • 选用AngularJS制作三个简约的福特ExplorerSS阅读器的教程
  • c# AJAX实施VS二〇〇七 + EnclaveSSToolKit开辟你和煦的途锐SS在线阅读器
  • Microsoft UniveRSS v0.8.0.0 微软的3D RSS阅读器 下载
  • Asp+Havalss阅读器制作
  • 基于JSP的ENCORESS阅读器的统一筹算与贯彻方式(推荐)
var schema = {
   tagName: 'item',
   id: 'use-index',
   fields: ['title', 'pubDate']
};
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
this.dataModel.addPreprocessor(1, parseDate); //列1是日期,先预处理一下
this.dataModel.onLoad.subscribe(this.onLoad, this, true);
this.dataModel.onLoadException.subscribe(this.showError, this, true);
this.dataModel.setDefaultSort(colModel, 1, 'ASC');

DataModel是GI景逸SUVD的数量出自。全部在 YAHOO.ext.grid包中的DataModels,都有一系统文告UI改换内容的事件。也正是说你能够退换model内的数码,而与此同不经常间对UI自动映射。

以此楷模中大家应用XMLDataModel。XMLDataModel提供一个简约的法子来映射XML文书档案与gird之间的结构。你所要做的是写个轻巧的schema,让model知道有哪些column给gird。Schema有下列属性:

  • tagName: - Model会读取这一节点下(tagName)的全部子节点(items的上一层节点名称);
  • id: - The attribute or child element to match to get the id of the row. If an attribute or child element is not found with the supplied "id" name, the index of the record is used. So if you don't have a specific id attribute, just use something like 'use-index' which won't be matched and the index will be used.
  • fields: - An array of attribute names or child node tag names to match for the column values. If you have 4 columns in your ColumnModel, you should have 4 items in your fields array. If a name specified in the array isn't found, an empty string is used.

跟着大家进入三个自定义的预处理器函数( a custom preprocessor)。如若只是对日期排序,不用这么些函数,也是没难点的(暗许它和煦也会排序)。用的收益是效用更加高。要注意的是,总得在 数据形成model数据一部分事先使用那几个函数。全部Porsche911SS FEED和XML实质都以字串符Strings,假如要让JAVASC普拉多IPT深入分析,应该先要类型调换,大家投入一个预管理器来转换来JAVASCEscortIP奇骏类型,然后嵌入DataModel中。

下边说说DataModel事件和私下认可排序(译注:好像未有排序),较易精晓的内容。

Step 3: 创建Grid

this.selModel = new YAHOO.ext.grid.SingleSelectionModel();
this.selModel.onRowSelect.subscribe(this.showPost, this, true); 
this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel); this.grid.render();

首先大家创制三个SingleSelectionModel。原因是大家想在同有时候内,限制独有三个选区是被入选的。倘让你不想要这种限制,忽略相关代码便可,不钦赐的图景下gird会自动成立DefaultSelectionModel。

SelectionModel暴光了七个事件:onRowSelect 和 onSelectionChange。onRowSelect当某一行选中或反选时接触,还大概有八个参数允许你传入,以便得知哪多少个行被入选或反选。onSelectionChange当Gird的选区暴发转移时接触。两个最重视的区分,当超越一行被入选(相同的时候内),选区的每一行会触发各自的风云,而onSelectionChange只会在多选区实现选取后,触发三次事件。越多关于那七个事件的细节,请参阅文书档案。

这段时间创造大家的Gird对象。第二个参数字传送入Grid营造函数的是被渲染的container(又作holder:架子、载体、Grid的承受者,在MVC中山大学量接纳)。Container必须内定中度和宽窄,若无安装相对/相对的一定,GI锐界D会设置"相对"。接下的第二和第三的参数是Step 1、 Step2 的靶子。

然后我们发轫渲染render()。事件上渲染grid到container。在render()调用此前,任何的职能如隔行换色、MouseOver换色等等的总得设置好。就算数据和选区是事件驱动的,可是假诺渲染便不能更动。所以那措施只调用一遍。可惜的是,你不能够渲染四个同是一个grid的containers,即grid实例是不行再用的。

Step 4 - 加载一些数额

this.dataModel.load('feed.php', {feed: 'http://feeds.feedburner.com/ajaxian'});

始建好XMLDataModel之后,这几个点子能够调用。小编的建议是在具备东西创立好之后调用该办法,那样的话,客商看到GIPRADOD 的UI以前,数据已经加载好。

load()带有七个法子。UTiggoL(必选),参数(可选),回调(可选)。参数亦可以经过编码的encoded字串符 (param1=one¶m2=two) ,或是叁个object(例子就是)。假使是目的,发送此前会将其键和值编码成U凯雷德I。

然后大家起头渲染render()。事件上渲染grid到container。在render()调用在此以前,任何的效劳如隔行换色、MouseOver换色等等的必得安装好。即使数据和选区是事件驱动的,可是一旦渲染便不能退换。所以那办法只调用贰回。可惜的是,你不可能渲染两个同是两个grid的containers,即grid实例是不足再用的。

比如你早就有XML文书档案的话,就足以一向加载,不用AJAX。load方法能够频频调用,替换或充实GTiggoID数据。在view.js代码中您可观望当客商sumbit提交feed form时的load()调用。

制造四个G中华VID和AJAX加载的代码行数不超过20行,何况是直来直去不绕弯的。固然那还得不到足以抒发GI陆风X8D全体威力,但希望那短小的事例能帮忙您起来入门。不要被这一个类难到你。大比很多这个类是在里头选拔的,或然你要自定义GIHighlanderD或扩充GI酷路泽D,都不须要修过主导。

完整的 feed-viewer.js下载 here. CSS 这里欲查看HTML源,在IFRAME上右键,应该会有“查看源代码”的选项。

您恐怕感兴趣的文章:

  • 用PHP读取RSS feed的代码
  • Jquery插件 easyUI属性汇总
  • jQuery EasyUI API 普通话文书档案 - ComboBox组合框
  • jQuery EasyUI API 华语文书档案 - DataGrid数据表格
  • jQuery EasyUI API 闽南语文书档案 - Tree树使用介绍
  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
  • Jquery EasyUI的增加,修改,删除,查询等基本操作介绍
  • jquery easyui中treegrid用法的大致实例
  • jQuery+easyui中的combobox完成下拉框特效
  • 自在学习jQuery插件EasyUI EasyUI创造树形网络(1)
  • 自在学习jQuery插件EasyUI EasyUI成立树形菜单
  • 自在学习jQuery插件EasyUI EasyUI创制奥德赛SS Feed阅读器

本文由王中王开奖结果发布于网络应用,转载请注明出处:轻巧学习jQuery插件EasyUI

关键词: