oGrid 初探
oGrid 是个还蛮有趣的 pure JavaScript grid 控件 code 并不多而且是纯 JavaScript 写成,一条小龙觉得还算蛮好理解,不像其他几乎都是用 Jquery 为 base,所以很适合初学者拿来做研究,或是有需要的人可以后面再根据其架构来自行开发出自己的控件,如此一来因为是自行开发的长期下来,掌控度也会好很多。
基本上,一条小龙认为,企业想要长期发展,都还是需要自行开发能配合其成长的相关控件,不可能把自己生命交给第三方厂商,然后期待他能配合公司需求来修改控件,当然如果你愿意付钱,应该也是可以,但这样技术都还是掌握在别人手上,这样企业主能安心吗? 当然如果该专案,只是这在起步,未来前景还不知道,那倒是可以先找成熟的第三方控件来使用,比较能快速看到成果,但在评选第三方控件时,都还是要能去找到一个掌握度比较大的第三方控件才是,这样后面专案有任何需求,你也才有办法去修改调整。
话不多说,接下来初步看一下,该控件的基本使用方式,下面 code 展示 oGrid 的一些基本用途,像是可以使用 loadData 来载入 json 资料,然后在后面操作也可以动态再去更新 data,要注意的是这里的 loadData 只能载入 JS 中的 json 物件资料,如需要动态像后端server 要资料,则要改用 loadFromUrl 这个函式。
<SCRIPT language="javascript">
var obj;
window.onload = function () {
obj = new obj4u.oGrid(dataTable);
obj.loadData(rawData); // loadData of method can auto generated columns
obj.addRows(rawData.rows[0]);
obj.insertRow(1, rawData.rows[0]);
obj.addRows(rawData.rows);
obj.renderData();
obj.event.AddEvent("onSelectedRow", oGrid_SelectedRow);
} function oGrid_SelectedRow(rowElement, row)
{
var selectedRows = obj.getSelectRows();
alert(rowElement.rowIndex+ " - " + selectedRows.length + "," + row["productid"]);
}
</SCRIPT>
<TABLE id="dataTable"> </TABLE>
由上面的 code 可以看出,该控件的使用方式,很接近 C#, Java 等的物件使用方式,很多第三控件使用的方式,是如下面一般,类似函式呼叫,然后传递参数的方式来使用,而且其中有个问题是,几乎大部分设定,都需要第一次初始化时,就要设定完成,不像 oGrid 较为灵活可以在任何时候去设定,只要在重新呼叫 renderData 即可按你的设定,再重新描述资料了。
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]],
onSelect: function(rowIndex, rowData){ }
});
oGrid 一条小龙就初步介绍到这边,有兴趣的读者,可以前往该网站 http://obj4u.com 进行更深入的了解。
oGrid 初探的更多相关文章
- oGrid 介绍如何从 server 取的资料
接着前次 oGrid 初探,其中有介绍如何操作local 资料,本次介绍如何从 server 取的资料. 依照 MVC 架构原理以及一条小龙本身经验来看,一个好的架构,必须要有着分工明确的设计层次,让 ...
- 初探领域驱动设计(2)Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- JavaScript学习(一) —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- .NET文件并发与RabbitMQ(初探RabbitMQ)
本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 【手把手教你全文检索】Apache Lucene初探
PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...
- Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用
一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...
随机推荐
- javascript 设计模式之观察者模式
观察者模式又叫发布——订阅模式,顾名思义pub——sub就是被动触发的,:不要给我......,我会给你.......就是一个发布订阅的解释,实质就是对程序中的某个对象状态进行监听观察,并且在该对象发 ...
- ux.form.field.SearchField 列表、树形菜单查询扩展
//支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...
- [CS231n-CNN] Linear classification II, Higher-level representations, image features, Optimization, stochastic gradient descent
课程主页:http://cs231n.stanford.edu/ loss function: -Multiclass SVM loss: 表示实际应该属于的类别的score.因此,可以发现,如果实际 ...
- MyBatis知多少(11)企业数据库
企业数据库比应用程序数据库更大,其外部影响也更大.它们与其他系统之间存在更多的关系,包括依赖关系和被依赖关系.这些关系可能是Web应用程序与报表工具之间的,但也很有可 能是与其他的复杂系统和数据库的接 ...
- 如何在mac os中安装gdb及为gdb进行代码签名
1. 安装gdb GDB作为一个强大的c/c++调试工具,一直是程序猿们的良好伴侣,但转到Mac os才发现竟然没有默认安装,所幸还有强大的homebrew工具: brew install homeb ...
- Mina、Netty、Twisted一起学(一):实现简单的TCP服务器
MINA.Netty.Twisted为什么放在一起学习?首先,不妨先分别看一下它们官方网站对其的介绍: MINA: Apache MINA is a network application frame ...
- 爬虫技术 -- 进阶学习(九)使用HtmlAgilityPack获取页面链接(附c#代码及插件下载)
菜鸟HtmlAgilityPack初体验...弱弱的代码... Html Agility Pack是一个开源项目,为网页提供了标准的DOM API和XPath导航.使用WebBrowser和HttpW ...
- ruby -- 基础学习(八)中文字符串截取的函数
学习来源:http://www.codesky.net/article/200910/166595.html truncate(text, length = 30, truncate_string = ...
- LeetCode——Gas Station
There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...
- sitemesh学习笔记(2)
之前我也是通过网上一些资料来学习sitemesh的,后来发现那些资料都比较老了,现在最近的已经是sitemesh3了而我之前看的是sitemesh2.3,今天重新去看了一些sitemesh3的资料,发 ...