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:提到无状态特性 ...
随机推荐
- CLR via C#深解笔记一 - CLR & C# 基础概念
写在前言 .Net Framework并不是Win 32 API 和COM上的一个抽象层. 某种程度上,它是自己的操作系统,有自己的内存管理器,自己的安全系统,自己的文件加载器,自己的错误处理 ...
- 三十、【C#.Net开发框架】WCFHosting服务主机的利用WCF服务通讯和实现思路
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- 比特(bit)与字节(byte)区别,站位比较
“字节”(Byte) “比特”(Bit) 当你进行网络下载的时候它们会经常出现,同时你获取的速度指示也都以比特/每秒或者字节/每秒来显示. 现在就来弄清楚比特(Bit).字节(Byte)和千字节(Kb ...
- xdebug调试一直等待连接
调试php时一般会启动浏览器,地址栏里一般是 index.php?XDEBUG_SESSION_START=xxx xxx表示调试的ide_key. 开了代理没有关,结果调试时一直无法连上,折腾了好久 ...
- iOS开发工具——网络封包分析工具Charles
简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...
- 你或许不了解的C++函数调用(1)
这篇博客名字起得可能太自大了,搞得自己像C++大牛一样,其实并非如此.C++有很多隐藏在语法之下的特性,使得用户可以在不是特别了解的情况下简单使用,这是非常好的一件事情.但是有时我们可能会突然间发现一 ...
- CentOS 6.4 编译安装LLVM3.3,Clang和Libc++
LLVM的最新版本3.3终于在6月17日发布了,按之前的计划6月5日就应该发布了,不过毕竟没有太晚,赶在VS2013 preview(6月26日微软Build大会)之前出来了.加上之前gcc4.8.1 ...
- Android 布局之RelativeLayout
Android 布局之RelativeLayout 1 RelativeLayout简介 RelativeLayout是相对布局. RelativeLayout布局属性 1.1 与parent相对的属 ...
- [OpenCV] Feature Matching
得到了杂乱无章的特征点后,要筛选出好的特征点,也就是good matches. BruteForceMatcher FlannBasedMatcher 两者的区别:http://yangshen998 ...
- 浅谈C++的this指针
之所以写这篇文章,主要是为了回答网友 zhancaihua123同学的下面几个问题: father* p=new son;p->disp(...);father是父类,son是子类.disp是一 ...