`

GT-Grid 1.0 基础教程(一)

JavaScriptjsonAjaxF#Blog 
阅读更多
GT-Grid 1.0 基础教程(一)

教程说明:
这是一个告诉大家如何快速的利用GT-Grid开发列表的基础教程.以后会推出"高级教程".
查看其他教程,以及最新版本信息,请点击这里


第一章: 从"纯客户端只读列表"开始

本章将演示如何开发出一个 纯客户端只读列表(数据已经在客户端存在,列表只是用来显示这些数据,没有CRUD功能).
同时演示了如何使用设置一些属性,来达到个性化的需求.

虽然本章教程的内容未必能够满足你的需求, 但是它却是GT-Grid使用的基础,
在你完全掌握该章的内容之前, 我并不建议你去接触后面的章节.

另外可能有一部分朋友会觉得,这个教程写的太啰嗦了 有些地方太基础了.
没错 我就是要啰嗦点 基础点.
因为我假想的对象是 从来没接触过任何基于ajax技术的列表组件的人(但是有一定的js基础,而且知道json是啥).


开始教程前, 请先建立一个"练习文件", 可以起名叫"mydemo1.html", 内容如下 : (建议编码为UTF-8,具体引入的文件路径请根据情况自己修改) 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>GT-Grid 教程示例</title>

<link rel="stylesheet" type="text/css" href="./gt_grid.css" />
<script type="text/javascript" src="./gt_msg_cn.js"></script>
<script type="text/javascript" src="./gt_grid_all.js"></script>
<script type="text/javascript" >
// 教程中的代码就写在这个区域里.


</script>
</head>

<body>
<!-- grid的容器. -->
<div id="grid1_container" style="width:700px;height:300px">
</div>

 </body>
</html>


好了 让我开始 GT-Grid的启航之旅吧.

=========================================

一个完整GT-Grid 由3部分组成:
1 数据. 
数据必须为一个json数组, 数组中的每一项为一个 js对象/js数组.例如下面两种形式的数据都是可以的.(但是不能混合使用).
数组中的每一项 代表 单条数据. 以下简称 record.

假设有这样一组数据 (学生信息) 

var data1 = [
   { no : 1 , name :'aaa', age : 12, gender : 'M' , english : 76.5 , math :92 },
   { no : 2 , name :'bbb', age : 11, gender : 'F' , english : 89   , math :87 },
   { no : 3 , name :'ccc', age : 13, gender : 'F' , english : 53   , math :62 }

];

var data2 = [
   [ 1 , 'aaa',  12,  'M' , 76.5 , 92 ],
   [ 2 , 'bbb',  11,  'F' , 89   , 87 ],
   [ 3 , 'ccc',  13,  'F' , 53   , 62 ]
]


我更推荐使用第一种,虽然也许有人认为数组应该"速度更快,占用的内存更少,传输时占用的贷款更少....",
但是这样的优势在实际使用中并不明显. 而且当和后台数据结合起来之后, 你会发现,
绝大多数 json的第三方转换工具 都会将pojo map等转换成第一种形式的json数据.
而且也更便于反向转换.

当然 对于第2钟GT-Grid也是支持的, 稍后我会讲解. 目前本例以及我以后所写的其他教程 ,都将以第一种形式的数据作为示例.


=========================================

2 数据集(dataset)
有了数据还不够, 因为GT-Grid未必就能理解这些数据, 你还需要对数据进行简单的描述.这个描述就是定义数据集.
前面提到的 data1 对应的数据集 完整定义如下: 

var dsConfig= {
	data : data1

	fields :[
		{name : 'no'     ,  type: 'int'     , index : 'no'      },
		{name : 'name'   ,  type: 'string'  , index : 'name'    },
		{name : 'age'    ,  type: 'int'     , index : 'age'     },
		{name : 'gender' ,  type: 'string'  , index : 'gender'  },
		{name : 'english',  type: 'float'   , index : 'english' },
		{name : 'math'   ,  type: 'float'   , index : 'math'    }
	]
}

data 指向 之前的数据.
fields 是一个数组, 描述record各个字段的信息,类似数据库表中的列信息. 

name :  字段的名字 (虽然时name 但是性质和id类似, 在一个数据集内要保持唯一性)
type :　字段的类型  ( 目前只支持 string ,int, float , 为什么没有date类型?因为我觉得没必要,以后我会找机会解释一下我的想法和建议) 
index　: 字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的时record哪个属性的值.

当 type 为 string 时, 可省略type设置.
当 index 和 name 一致时, 可省略 index设置.
所以 一个简化后的定义为: 
var dsConfig= {
	data : data1 ,

	fields :[
		{name : 'no'     ,  type: 'int'    },
		{name : 'name'      },
		{name : 'age'    ,  type: 'int'    },
		{name : 'gender'    },
		{name : 'english',  type: 'float'  },
		{name : 'math'   ,  type: 'float'  }
	]
};


如果你的record时数组,而不是json-object (就是前面提到的 data2 ),
那么 index 就应该为 0 ,1 ,2 ....等等, 用来表示该列对应record中的第几条数据.

=========================================

3 GT-Grid组件.
第三部分就是定义并创建GT-Grid对象.创建GT-Grid对象的方法如下: 
var mygrid1 = new GT.Grid( { /*...一些配置信息...*/ }  );

我个人比较习惯将 new GT.Grid的大段的参数单独声明. 一个简单的例子如下: 
var gridConfig={

	id : "grid1",
	
	dataset : dsConfig ,

	columns : colsConfig ,

	container : 'grid1_container', 

	toolbarPosition : 'bottom',

	toolbarContent : 'state'

};

var mygrid=new GT.Grid( gridConfig );




id : 每个列表组件都有一个id 该id在页面内唯一.
dataset :列表对应的数据集
columns　:　??? 这是什么 ??? 别急.
container : 列表的容器的id. 列表最后是要显示在页面中某个位置.这个容器就是那个"位置",通常是一个div或者时td.
toolbarPosition : 工具栏的位置. 可选值:'top'/'bottom'/null,  暂时不支持上下都显示.
toolbarContent : 工具栏上要显示的东西, state表示的数据数量信息(分页信息),如共几条 共几页 当前是第几条等等.这个属性的其他用法暂时先不用管.

回过头来我们说说那个 "columns : colsConfig ".
columns 属性用来定义列表中各个列的信息. 本例中 columns 一个简单的定义如下
(我们假设这些数据是学生的信息,所以我们用"学号") 

var colsConfig = [
		{ id : 'no'     ,header : "学号" , fieldName : 'no'　   },
		{ id : 'name'   ,header : "姓名" , fieldName : 'name'   },
		{ id : 'age'    ,header : "年龄" , fieldName : 'age'    },
		{ id : 'gender' ,header : "性别" , fieldName : 'gender' },
		{ id : 'english' , header : "英语"  , fieldName : 'english'  },
		{ id : 'math'    , header : "数学"  , fieldName : 'math' }
];


id : 列的唯一标识, 必须保证列表内唯一,建议整个页面唯一.
header : 列表的表头显示的文字信息.
fieldName : 列表的该列对应的 dataset中的列(字段).

如果 fieldName 和 id一致 那么可以省略fieldName设置. 所以 上诉的配置简化后为. 
var colsConfig = [
		{ id : 'no'      , header : "学号" },
		{ id : 'name'    , header : "姓名" },
		{ id : 'age'     , header : "年龄" },
		{ id : 'gender'  , header : "性别" },
		{ id : 'english' , header : "英语" },
		{ id : 'math'    , header : "数学" }
];


( 关于grid和columns的更多属性设置请参考"GT-Grid高级教程".本教程不会涉及.)

好了,到此 GT-Grid列表组件的三大部分就介绍完了. 在介绍的同时, 实际上我已经写出了第一个示例的代码.

不过有了上面的代码还不够. 因为上面的代码相当于只是"定义除了这个 列表组件.
并没有真正的在页面中创建这个列表.
要想创建列表需要执行下面的语句. 
GT.Utils.onLoad( function(){
	mygrid.render();
} );   //mygrid为之前创建的对象,此处也可以传入grid的id.

("这条语句到底时做什么的?是否还有其他方式到达同样目的?" 本教程不会讲解)


=========================================

现在 大家把上面的代码 整理一下, 按照下列顺序, 加到 mydemo1.html 里, 运行一下吧. 
var data1 ...
var dsConfig ....
var colsConfig ...
var gridConfig ....
var mygrid=new GT.Grid( gridConfig );
GT.Utils.onLoad( function(){
	mygrid.render();
} );


如果一切顺利 , 你应该可以见到一个 纯客户端只读列表. 它具有的功能很简单 :　
固定表头
可调整列宽
单击列表头排序
可调整列的相对位置(按ctrl不放,拖动列表头)


下一章 我将告诉大家如何 对列的扩展和显示效果的自定义.


=========================================

最后的成果图:
分享到：
| 视图，存储过程，触发器的好处
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GT-Grid 1.0 基础教程

    本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作，以便在实际项目中应用。下面将详细阐述GT-Grid 1.0 的关键知识点。 一、GT-Grid 1.0 概述 GT-Grid 1.0 是一个基于Java开发的分布式计算...

    GT-Grid 1.0 基础教程(一)转载

    ### GT-Grid 1.0 基础教程(一)——纯客户端只读列表开发详解 #### 一、教程背景与目标 本教程旨在帮助初学者快速掌握如何使用GT-Grid开发纯客户端只读列表的基本技能。对于那些对Ajax技术下的列表组件不太熟悉的...

    vue3 访问通义千问聊天代码例子

    vue3 访问通义千问聊天代码例子

    基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频.zip

    基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频 项目关键技术 开发工具：Pycharm 编程语言: python 数据库: MySQL5.7+ 后端技术：Flask 前端技术：HTML 关键技术：HTML、MYSQL、Python 数据库工具：Navicat、SQLyog

    C#调用Ni板卡进行实现采集任务(模拟量输入输出)示例1

    【实验1】：读取一次AI0通道数值 【实验2】：一次读取AI0通道多个数值 【实验3】：单次模拟量输出 【实验4】：连续模拟量输出（输出一个正弦曲线）

    无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进

    无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进跟踪控制技术及其LOS曲线跟踪方法研究资料,基于无人船的smith-pid跟踪控制资料。 首先，针对pid进行了改进，有传统pid，最优pid和基于smith的pid三种控制方式。 然后还在smithpid基础上设计了LOS的曲线跟踪方法。 （有对应参考文献）。 有意者可直接联系，参考学习资料。 python语言。 ,基于无人船的Smith-PID跟踪控制; PID改进(传统PID、最优PID、基于Smith的PID); Smith-PID曲线跟踪方法; 参考学习资料; Python语言。,基于无人船的Smith-PID优化跟踪控制资料

    自研船舶电力推进系统MATLAB仿真报告：从柴油机+同步发电机到异步电机直接转矩控制的全面模拟与实践,船舶电力推进系统自搭MATLAB仿真报告：从柴油机同步发电机到异步电机直接转矩控制的完整过程与参

    自研船舶电力推进系统MATLAB仿真报告：从柴油机+同步发电机到异步电机直接转矩控制的全面模拟与实践,《船舶电力推进系统自搭MATLAB仿真报告：从柴油机同步发电机到异步电机直接转矩控制的完整过程与参数配置详解》,自己搭建的船舶电力推进系统（船舶电力推进自动控制）完全自搭MATLAB仿真，可适度，含对应27页正文的中文报告，稀缺资源，仿真包括船舶电站，变流系统和异步电机直接转矩控制，放心用吧。 三个文件逐层递进 柴油机+同步发电机（船舶电站） 柴油机+同步发电机+不控整流全桥逆变 柴油机+同步发电机+变流模块+异步电机直接转矩控制 所有参数都是配好的，最大负载参考变流系统所带负载两倍，再大柴油机和同步发电机参数就不匹配了，有能力可以自己调 ,核心关键词：船舶电力推进系统; MATLAB仿真; 船舶电站; 变流系统; 异步电机直接转矩控制; 柴油机; 同步发电机; 不控整流全桥逆变; 参数配比。,《船舶电力推进系统MATLAB仿真报告》

    西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参

    西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V15自动化系统项目实战：多服务器客户端下的PID DCS闭环控制及参数调整实战指南,西门子博图WinCC V 15大型自动化系统项目，包含多台服务器客户端项目，系统采用安全1516F -3PN DP 外挂多台精智面板，1200PLC ET200SP 变频器 对整个工艺过程PID DCS 闭环过程控制，如何调整温度压力流量液位等参数，实用工程项目案例 ,西门子博图WinCC V 15; 大型自动化系统; 多台服务器客户端; 安全外挂; 精智面板; 1200PLC ET200SP; 变频器; PID DCS; 闭环过程控制; 温度压力流量液位调整; 工程项目案例,西门子博图WinCC V15大型项目：多服务器客户端的PID DCS闭环控制与实用参数调整

    计算机网络资源全解析: 硬件、软件、协议及安全机制详解与应用

    内容概要：本文详尽介绍了计算机网络相关资源及其各方面构成要素，首先阐述了硬件层面的各种传输媒介和设备如双绞线、同轴电缆、光纤以及台式电脑、笔记本、大型计算机等设备，还包括网络互联所需的各类组件如网卡、交换机、路由器等。其次探讨了多种操作系统的特性和主要功能，以及各类通讯和支持应用程序的概述，涵盖浏览器、图像和视频编辑等常用软件。再深入讨论了多种常见网络协议如TCP、UDP、HTTP等的功能特性。最后还提到了确保网络安全运行的重要措施和工具如MIB、SNMP以及防火墙、入侵检测系统等。并且简要提到计算机网络在不同的应用环境，从局域网到移动网络。 适合人群：所有对计算机网络技术感兴趣的初学者和希望深入了解各个组成成分的技术人员. 使用场景及目标：为用户提供计算机网络资源全面而系统的认识，帮助他们建立对于该领域的理论和技术的扎实认知基础，提高在实际环境中识别配置及维护计算机网络系统的能力.

    【GPS北斗定位】基于matlab卡尔曼滤波KF北斗GPS单模和双模定位比较【含Matlab源码 10974期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    ABAQUS中隧道结构模型的无限元应用：超声激励源的施加方法、3D无限元吸收边界的添加技巧、模型结果精确性校核流程及教学视频与CAE、INP文件解析,ABAQUS隧道模型中3D无限元吸收边界的应用：超

    ABAQUS中隧道结构模型的无限元应用：超声激励源的施加方法、3D无限元吸收边界的添加技巧、模型结果精确性校核流程及教学视频与CAE、INP文件解析,ABAQUS隧道模型中3D无限元吸收边界的应用：超声激励源的施加与模型结果精确性校核的实践教程,ABAQUS无限元吸收边界，abaqus隧道无限元，1.超声激励源施加;2.3D无限元吸收边界添加方法；3.模型结果精确性校核；4.提供教学视频，cae、inp文件。 ,ABAQUS无限元吸收边界；ABAQUS隧道无限元；超声激励源施加；3D无限元吸收边界添加；模型结果精确性校核；CAE和INP文件。,ABAQUS中超声激励下无限元吸收边界设置及模型精度验证教程

    【SLAM】基于matlab扩展卡尔曼滤波器EKF同步定位与建图SLAM【含Matlab源码 10978期】复现.mp4

    海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    git自用lllllllllllllllllll

    git自用lllllllllllllllllll

    【Django小白项目】参照本，包含python、HTML、Django

    本资源与文章【Django小白项目】为一体，此为已成功项目，供给给Django初学者做参考，有不会的问题可以私信我噢~

    C++矩阵运算库matrix

    使用一维数据表示向量和二维矩阵，支持常用运算。

    基于STM32的宠物自动喂食器系统设计.pdf

    1、以上文章可用于参考，请勿直接抄袭，学习、当作参考文献可以，主张借鉴学习 2、资源本身不含 对应项目代码，如需完整项目源码，请私信博主获取

    基于多目标粒子群优化算法（MOPSO）的微电网多目标经济运行分析与优化策略考虑响应侧响应的协同调度策略,基于多目标粒子群优化算法（MOPSO）的微电网经济调度优化：含风光储荷一体化模型与需求侧响应策略

    基于多目标粒子群优化算法（MOPSO）的微电网多目标经济运行分析与优化策略考虑响应侧响应的协同调度策略,基于多目标粒子群优化算法（MOPSO）的微电网经济调度优化：含风光储荷一体化模型与需求侧响应策略,考虑需求侧响应的微电网多目标经济运行 建立了含风光储荷的微电网模型，以发电侧成本(包括风光储以及电网的购电成本)和负荷侧成本最小为目标，考虑功率平衡以及储能SOC约束，建立了多目标优化模型，通过分时电价引导负荷需求侧响应，得到可削减负荷量，同时求解模型，得到风光储以及电网的运行计划。 这段代码是一个使用多目标粒子群优化算法（MOPSO）解决问题的程序。下面我将对程序进行详细的分析和解释。 首先，程序的目标是通过优化算法来解决一个多目标优化问题。程序中使用的优化算法是多目标粒子群优化算法（MOPSO），该算法通过迭代更新粒子的位置和速度来搜索最优解。 程序的主要功能是对能源系统进行优化调度，包括光伏发电、风力发电、储能和电网供电。程序的目标是最小化能源系统的成本，并满足负荷需求。 程序的主要思路是使用粒子群优化算法来搜索最优解。程序中定义了一个粒子类（Particle），每个粒子代

    data.gov.sg geojson部分项目整理

    data.gov.sg geojson部分项目整理

    基于MATLAB Simulink的避障功能欠驱动无人船航迹跟踪控制仿真实验研究,基于MATLAB Simulink的欠驱动无人船避障功能路径跟踪控制仿真实验研究,包含避障功能的欠驱动无人船航迹（路径

    基于MATLAB Simulink的避障功能欠驱动无人船航迹跟踪控制仿真实验研究,基于MATLAB Simulink的欠驱动无人船避障功能路径跟踪控制仿真实验研究,包含避障功能的欠驱动无人船航迹（路径）跟踪控制仿真实验，基于MATLAB Simulink制作 ,避障功能; 欠驱动无人船; 航迹（路径）跟踪控制; MATLAB Simulink 仿真实验; 避障算法。,基于MATLAB Simulink的避障无人船航迹跟踪控制仿真实验

Magicbox
Global site tag (gtag.js) - Google Analytics