oGrid 介绍如何从 server 取的资料
接着前次 oGrid 初探,其中有介绍如何操作local 资料,本次介绍如何从 server 取的资料。
依照 MVC 架构原理以及一条小龙本身经验来看,一个好的架构,必须要有着分工明确的设计层次,让后续接手的人,很清楚知道该处该放哪些资料以及 code。
由此思路 oGrid 应该要能让设计者,可以由后端来处理资料,再传给元件来做处理,而不要一部分逻辑在前端一部分在后端,虽然要把很多逻辑都放到后端来处理,会加深设计的困难度,但如此一来,就可得到前述的分工明确的要求,尽量让前端元件,单纯只做显示地处里或是前端UI与使用者互动的处里,然后把资料相关的逻辑都给后端来处理。
而且如能维持本精神来设计,到后面前端的架构应该是很干净,甚至应该能给不同专案来使用,所以而此可知其实前面设计也许成本变多,但到后面成本反而降低了,这就是一个好的架构,所带来的优点。
下面,先来看一下,oGrid 预计要后端来处理的 JSON 资料的格式,然后就可以思考一下,后端该如何设计来呈现这样的资料格式。
这边资料格式有几个重点,total, rows, columns。
total :是资料总笔数,oGrid 会根据此来进行分页的呈现,第一次 init 时,只需要传回第一分页的资料,等到下一分页时 oGrid 会再发送要求来抓取下一分页的资料。
rows:是资料主体,除了描述资料,还可以再每列上或是在特定的 cell 加注 style,如下面第一列的方式,这个模式可以方便开发人员在特定资料来标注颜色,例如:单价过低 等等。
columns:告诉 oGrid 栏位的定义,以及呈现方式,column 里面属性分别的意义,可以参考官网上的说明。
{"total":30,
"rows":[
{"Id":1,"name":"test1","addr":"address - 1","phone":"P1",
"cellStyle":[{"field":"phone","className":"error","style":null},{"field":"name","className":"error","style":null}]},
{"Id":2,"name":"test2","addr":"address - 2","phone":"P2"},{"Id":3,"name":"test3","addr":"address - 3","phone":"P3"},
{"Id":4,"name":"test4","addr":"address - 4","phone":"P4"},{"Id":5,"name":"test5","addr":"address - 5","phone":"P5"},
{"Id":6,"name":"test6","addr":"address - 6","phone":"P6"},{"Id":7,"name":"test7","addr":"address - 7","phone":"P7"},
{"Id":8,"name":"test8","addr":"address - 8","phone":"P8"},{"Id":9,"name":"test9","addr":"address - 9","phone":"P9"},
{"Id":10,"name":"test10","addr":"address - 10","phone":"P10"}],
"columns":[{"field":"Id","title":"code","width":"100px","hidden":false},
{"field":"name","title":"name","width":"100px","hidden":false},
{"field":"addr","title":"address","width":"100px","hidden":false},
{"field":"phone","title":"phone","width":"100px","hidden":false}]}
下面是 后端的程式码,用 PHP 写成,老实说 .Net 跟 PHP 比起来,PHP 在做 JSON 资料的处理真的是比较简单且直觉。
首先读者要先建立 几个 class 来处理上述资料,使用对应 class 处理好资料后,丢给 PHP 就会自动帮你生成上述资料的格式了。
一是 rows 资料主体,这里用 cutomer 这个 class 来处理客户资料,下面的 sample code 只是简单示范如何处理资料,实务上需要再加上资料库的读取处理。如上述,下面 Sample 也有示范如何在 rows 中包含 rowStyle 以及 cellStyle 这两个 class 的使用,在有需要的时候可以用来描述资料显示的样式,但非必要选项。
二是 columns 这个部分的 code 其实算是一个通用的 server code,实务上可以把这部分包成一个共用类别来处理。
oGrid 在跟 server 要资料,会传三个参数来告诉 server side 要给 oGrid 怎样的资料,参数分别说明如下:
type:有 init, data 两种,一开始 oGrid init 时 type 为 init,后面 user 切换分页时,type=data。
page:代表目前 oGrid 所在分页。
rows:代表每个分页要显示的资料笔数。
<?php
class column
{
public $field;
public $title;
public $width;
public $hidden; function column($id, $caption)
{
$this->field = $id;
$this->title = $caption;
$this->width = "100px";
$this->hidden = false;
}
}
class customer
{
public $Id;
public $name;
public $addr;
public $phone;
}
class rowStyle
{
public $className;
public $style;
}
class cellStyle
{
public $field;
public $className;
public $style;
}
$type = $_GET["type"];
$page = isset($_POST['page']) ? intval($_POST['page']) : 0;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; $start = $page * $rows + 1;
$last = $start + $rows;
$items = array();
for($i=$start;$i< $last;$i++){ // deal rows data
$obj = new customer();
$obj->Id = $i;
$obj->name = "test".$i;
$obj->addr = "address - ".$i;
$obj->phone = "P".$i;
if($i == 1)
{
//$obj->rowStyle = new rowStyle();
////$obj->rowStyle->style = "background-color:#ffee00;";
//$obj->rowStyle->className = "error"; // for cell
//$obj->cellStyle = new cellStyle();
//$obj->cellStyle->field = "phone";
//$obj->cellStyle->className = "error"; $obj->cellStyle = array();
$cs = new cellStyle();
$cs->field = "phone";
$cs->className = "error";
array_push($obj->cellStyle, $cs); $cs = new cellStyle();
$cs->field = "name";
$cs->className = "error";
array_push($obj->cellStyle, $cs);
}
array_push($items, $obj);
}
$result["total"] = 30;
$result["rows"] = $items; if($type == "init") // deal columns when type is init
{
$columns = array();
$col = new column("Id", "code");
array_push($columns, $col);
$col = new column("name", "name");
array_push($columns, $col);
$col = new column("addr", "address");
array_push($columns, $col);
$col = new column("phone", "phone");
array_push($columns, $col);
$result["columns"] = $columns;
} echo json_encode($result); ?>
上面 code 要注意的是只有 type=init 时才需要处理 columns,如果是切换分页时,type = data。
最后,介绍的是 前端的 oGrid 对应的操作,这部分相对于 server code 简单很多,只要如下面 sample 设定好 loadURL 来告诉 oGrid 到 server 哪抓取JSON 资料,再呼叫 load (同步),oGrid 就会到 server 端抓回资料,有必要读者 来可以在 load 后针对抓取后的资料在来做处理,如不需要,则可直接呼叫 renderData 来描绘UI。
下面 sample 有一个特别的地方,就是 obj.reloadPage = false;, oGrid 预设 reloadPage=true,代表每次有更换分页的动作都会到 server 端来要求传回对应的分页资料,如果设定为 false 则 oGrid 会检查该分页资料是否有抓取过,没有抓取过才会去server 端抓取,如此因为不用每次都到 server 端来要资料,所以效率提高很多。但相对也会有点风险,因为 server 端资料 如果被更改过,oGrid 却没有重新 reload 资料,则会造成前端资料跟server 不一致的错误,所以读者要看需求来决定是否要设 false。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>set row/column background color from server</TITLE>
<script type="text/javascript" src="./oGrid.js"></script>
<link type="text/css" rel="stylesheet" href="oGrid.css" />
<style type="text/css">
.oGrid .error{background-color:#ffee00;color:red;}
</style>
<SCRIPT language="javascript">
var obj;
window.onload = function () {
obj = new obj4u.oGrid(dataTable);
obj.event.AddEvent("onLog", showLog);
obj.event.AddEvent("onSelectedRow", oGrid_SelectedRow); obj.loadUrl = 'http://obj4u.com/samples/getJSON3.php';
//obj.reloadPage = false; // when this page only view data can use this function.
obj.load("init");
obj.renderData();
} function oGrid_SelectedRow(rowElement, row) {
var selectedRows = obj.getSelectRows();
alert(rowElement.rowIndex + "," + row.index + " , " + selectedRows.length + "," + row["Id"]);
} function showLog(msg) {
alert(msg);
} </SCRIPT>
</HEAD>
<BODY> <TABLE id="dataTable">
</TABLE> </BODY>
</HTML>
上述 sample 取自 http://obj4u.com/samples/example08.html,一条小龙在加以解释,有需要可在连该网址来试试。
oGrid 介绍如何从 server 取的资料的更多相关文章
- CLR的GC工作模式介绍(Workstation和Server)
CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...
- SQL Server取datetime的日期部分
在c#中有个Date属性用于返回日期,其实就是当天0点. DateTime dtNow = DateTime.Now; DateTime dtNow2 = dtNow.Date; Console.Wr ...
- SQL Server取系统当前时间【转】
getdate //获得系统当前日期 datepart //获取日期指定部分(年月日时分表) getdate()函数:取得系统当前的日期和时间.返回值为datetime类型的. 用法:getdate( ...
- sql server索引功能资料
无论何时对基础数据执行插入.更新或删除操作,SQL Server 数据库引擎都会自动维护索引.随着时间的推移,这些修改可能会导致索引中的信息分散在数据库中(含有碎片).当索引包含的页中的逻辑排序(基于 ...
- sql server 取随机行
--从table_name中随机取n行 select top n * from table_name order by NEWID()
- 一、tars简单介绍 二、tars 安装部署资料准备
1.github地址https://github.com/Tencent/Tars/ 2.tars是RPC开发框架,目前支持c++,java,nodejs,php 3.tars 在腾讯内部已经使用了快 ...
- Coalesce (MS SQL Server)——取指定内容(列)中第一个不为空的值
oalesce 获得参数中第一个不为空的表达式. 语法: COALESCE ( expression [ ,...n ] ) 例子:CREATE TABLE wages ...
- sql server取某个时间段内所有日期或者所有月份
取所有月份: declare @begin datetime,@end datetime set @begin='2015-2-6' set @end='2015-12-2' declare @mon ...
- sql server 取文件名函数 转载
/****** Object: UserDefinedFunction [dbo].[GetDirectoryPath] Script Date: 2016-12-16 16:54:05 ****** ...
随机推荐
- 【原】SQL ROW_NUMBER() OVER
语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) SELECT ROW_NUMBER() OVER(ORDER BY CASE Col ...
- 最近想上游戏,弄了个工作室,名"柑谷工作室"
最近想上游戏,弄了个工作室,名"柑谷工作室",名字取得有点随便,原因是好名字都让狗用了.想当年我用的龙纹工作室,现在龙纹两字也被人用了.人家有硅谷,然后我弄个柑谷,差不多吧.算了, ...
- 使用SharePoint Designer定制开发专家库系统实例!
将近大半年都没有更新博客了,趁这段时间不忙,后续会继续分享一些技术和实际应用.对于Sharepoint的定制开发有很多种方式,对于一般的应用系统,可以使用Sharepoint本身自带的功能,如列表作为 ...
- java攻城狮之路(Android篇)--Activity生命
一:Activity的激活 1.写一个类 extends Activity Activity是android的四大组件之一.Activity的激活分为显式意图激活和隐式意图激活.如果一个activit ...
- 直接把数据库中的数据保存在CSV文件中
今天突然去聊就来写一个小小的demo喽,嘿嘿 public partial class Form1 : Form { public Form1() { InitializeComponent(); } ...
- 自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
关于 Redis ,下面来自百度百科: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set( ...
- NGUI之UIRoot屏幕分辨率自适应
NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 U ...
- FAQ: Machine Learning: What and How
What: 就是将统计学算法作为理论,计算机作为工具,解决问题.statistic Algorithm. How: 如何成为菜鸟一枚? http://www.quora.com/How-can-a-b ...
- Action接收页面传来的参数方法
接收页面传来的参数方法 1.第一种:在action中设置相应的变量 在相应的action中设置与将要传进来的参数名相同的变量 eg: 页面传给后台两个参数 name=chance & age ...
- 开源一个基于天天团购的团购app
可能大家都知道天天团购开源系统,一个做团购的开源项目很赞,前些日子做了基于天天团购系统做的团购客户端和移动端服务器!源代码放出,有了解的可以看看,希望收益! 先说服务器:app的服务器,基于天天团购的 ...