玫瑰花瓣|雨丝

显示标签为“巧做Web Database Grid”的博文。显示所有博文
显示标签为“巧做Web Database Grid”的博文。显示所有博文

2007年5月1日星期二

创建MySQL测试数据

 1 use test;
2 drop table if exists staff;
3 drop table if exists sections;
4 create table sections
5 (
6 id int,
7 name varchar(16) not null,
8 primary key (id)
9 )
10 type=InnoDB
11 CHARACTER SET utf8;
12
13 insert into sections values(1, '西游');
14 insert into sections values(2, '水浒');
15 insert into sections values(3, '红楼');
16 insert into sections values(4, '三国');
17
18 create table staff
19 (
20 id int,
21 name varchar(8) not null,
22 gender int not null default 1,
23 birth date,
24 section_id int,
25 email varchar(50),
26 salary decimal(12,3) not null default 0.00,
27 holiday int not null default 0,
28 index in_section(section_id),
29 foreign key(section_id) references sections(id) on delete cascade on update cascade,
30 primary key(id, section_id)
31 )
32 type=InnoDB
33 CHARACTER SET utf8;
34
35 insert into staff values(1,'孙悟空',1,'1970/04/01',1,'sunwukong@kerbor.com', 10000,0);
36 insert into staff values(2,'唐僧',1,'1960/12/01',1,'tangseng@kerbor.com', 12000,0);
37 insert into staff values(1,'宋江',1,'1974/06/01',2,'songjiang@kerbor.com', 8000,0);
38 insert into staff values(2,'孙二娘',0,'1970/04/01',2,'sun2niang@kerbor.com', 7500,0);
39 insert into staff values(1,'王熙凤',0,'1971/05/19',3,'wangxifeng@kerbor.com', 16000,1);
40 insert into staff values(2,'薛宝钗',0,'1984/09/04',3,'xuebaoX@kerbor.com', 7500,0);
41 insert into staff values(1,'吕布',1,'1982/02/19',4,'lvbu@kerbor.com', 12000,1);
42 insert into staff values(2,'貂禅',0,'1984/09/16',4,'diaochan@kerbor.com', 6500,1);

2007年4月6日星期五

制作第一个Grid实例

让我们从一个可以看得见效果的实例着手。先明确下任务:在本例中,我们将展现一个人员清单。假设某公司有四个部门及其人员若干。主要的数据如下:

部门人员
西游唐僧
孙悟空
水浒宋江
孙二娘
红楼王熙凤
薛宝钗
三国吕布
貂禅

把数据规范一下

部门[section]
部门代号[id]部门名称[name]
1西游
2水浒
3红楼
4三国


人员[staff]
人员代码姓名出生日期性别所在部门电邮月薪休假
idnamebirthgendersection_idemailsalaryholiday
intchardateboolintcharpricebool
1孙悟空104/01/19701sunwukong@gmail.com100000
1唐僧112/01/19601tangseng@gmail.com120000
1宋江106/01/19742songjiang@gmail.com90000
2孙二娘004/01/19702sun2niang@gmail.com80000
1王熙凤006/01/19713wangxifeng@gmail.com160001
2薛宝钗009/04/19843xuebaochai@gmail.com75000
1吕布102/19/19824lvbu@gmail.com120001
2貂禅009/16/19844diaochan@gmail.com65001

性别表示为
  • 女=0
  • 男=1
休假表示为
  • 工作=0
  • 休假=1
创建Gird的数据源 —— test_grid.xml文件,代码如下:


 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE rows SYSTEM "dhtmlxgrid.dtd">
3 <rows>
4 <row id="1">
5 <cell>1</cell>
6 <cell>孙悟空</cell>
7 <cell>1</cell>
8 <cell>04/01/1970</cell>
9 <cell>1</cell>
10 <cell>sunwukong@kerbor.com^mailto:sunwukong@kerbor.com</cell>
11 <cell>10000</cell>
12 <cell>0</cell>
13 </row>
14 <row id="2">
15 <cell>2</cell>
16 <cell>唐僧</cell>
17 <cell>1</cell>
18 <cell>12/01/1960</cell>
19 <cell>1</cell>
20 <cell>tangseng@kerbor.com^mailto:tangseng@kerbor.com</cell>
21 <cell>12000</cell>
22 <cell>0</cell>
23 </row>
24 <row id="3">
25 <cell>1</cell>
26 <cell>宋江</cell>
27 <cell>1</cell>
28 <cell>06/01/1974</cell>
29 <cell>2</cell>
30 <cell>sunjiang@kerbor.com^mailto:sunjiang@kerbor.com</cell>
31 <cell>8000</cell>
32 <cell>0</cell>
33 </row>
34 <row id="4">
35 <cell>2</cell>
36 <cell>孙二娘</cell>
37 <cell>0</cell>
38 <cell>04/01/1970</cell>
39 <cell>2</cell>
40 <cell>sun2niang@kerbor.com^mailto:sun2niang@kerbor.com</cell>
41 <cell>7500</cell>
42 <cell>0</cell>
43 </row>
44 <row id="5">
45 <cell>1</cell>
46 <cell>王熙凤</cell>
47 <cell>0</cell>
48 <cell>05/19/1971</cell>
49 <cell>3</cell>
50 <cell>wangxifeng@kerbor.com^mailto:wangxifeng@kerbor.com</cell>
51 <cell>16000</cell>
52 <cell>1</cell>
53 </row>
54 <row id="6">
55 <cell>2</cell>
56 <cell>薛宝钗</cell>
57 <cell>0</cell>
58 <cell>09/04/1984</cell>
59 <cell>3</cell>
60 <cell>xuebaoX@kerbor.com^mailto:xuebaoX@kerbor.com</cell>
61 <cell>7500</cell>
62 <cell>0</cell>
63 </row>
64 <row id="7">
65 <cell>1</cell>
66 <cell>吕布</cell>
67 <cell>1</cell>
68 <cell>02/19/1982</cell>
69 <cell>3</cell>
70 <cell>lvbu@kerbor.com^mailto:lvbu@kerbor.com</cell>
71 <cell>12000</cell>
72 <cell>1</cell>
73 </row>
74 <row id="8">
75 <cell>2</cell>
76 <cell>貂禅</cell>
77 <cell>0</cell>
78 <cell>09/16/1984</cell>
79 <cell>3</cell>
80 <cell>diaochan@kerbor.com^mailto:diaochan@kerbor.com</cell>
81 <cell>6500</cell>
82 <cell>1</cell>
83 </row>
84 </rows>


制作Grid

接下来就是制作Grid来展示这些数据,效果图如下



演示地址:http://www.kerbor.com/tmp/dodo/test/test_grid.html

该Grid支持键盘操作,说明如下:
  • Tab — 去当前行的下一个cell
  • Shift+Tab — 去当前行的前一个cell
  • Up, Down - 去上/下面一行
  • Enter - 如果在编辑模式下,则关闭编辑模式
  • Space - 改变单选框/复选框的状态
  • F2 - 进入编辑状态
  • Esc - 结束编辑状态

Gird制作解析

下载和安装:解压缩即可。比较有用的目录是css,imgs和js,可以根据自己的网站配置自行设定。下面是我的目录结构:

  • css ----------------------样式文件都在这里
  • js -----------------------JavaScript文件都在这里
    • dhtmlxgrid -------dhtmlxgrid.zip里面的js里面的文件都放在了这里
    • ... ---------------------其它的JavaScript文件,比如dojo的文件都在这里
  • images ----------------图形文件都放在了这里
  • ... -----------------------其它的文件
  • test ----------------------所有的实例都在这里 test_grid.html源码剖析

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
3 <html>
4 <head>
5 <title>dhtmlXGrid实例</title>
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
7 </head>
8 <style>
9 body, . {font-size:12px;font-family:arial;}
10 .even{ background-color:#E6E6FA; }
11 .uneven{ background-color:#F0F8FF; }
12 </style>
13 <body>
14 <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXGrid.css">
15 <script>_css_prefix="../css/"; _js_prefix="../js/dhtmlxgrid/"; </script>
16 <script src="../js/dhtmlxgrid/dhtmlXCommon.js"></script>
17 <script src="../js/dhtmlxgrid/dhtmlXGrid.js"></script>
18 <script src="../js/dhtmlxgrid/dhtmlXGridCell.js"></script>
19 <script src="../js/dhtmlxgrid/dhtmlXGrid_excell_calck.js"></script>
20 <script src="../js/dhtmlxgrid/dhtmlXGrid_excell_acheck.js"></script>
21 <script src="../js/dhtmlxgrid/dhtmlXGrid_excell_calendar.js"></script>
22 <script src="../js/dhtmlxgrid/dhtmlXGrid_excell_clist.js"></script>
23 <script src="../js/dhtmlxgrid/dhtmlXGrid_excell_link.js"></script>
24
25 <div id="gridbox" width="500px" height="200px" style="background-color:white;"></div>
26 <input type="button" name="current_record" value="显示当前记录id" onclick="alert(mygrid.getSelectedId())">
27 <input type="button" name="delete_record" value="删除当前记录id" onclick="mygrid.deleteSelectedItem()">
28 <input type="button" name="record_num" value="记录数" onclick="alert(mygrid.getRowsNum())">
29 <input type="button" name="column_num" value="字段数" onclick="alert(mygrid.getColumnCount())">
30 <input type="button" name="insert_record" value="尾加空记录" onclick="mygrid.addRow('x3','0, ,0, ,0, ,0,0',mygrid.getRowsNum())">
31 <br><br>更新事件:<br>
32 <div id="protocol" style="width:500px;height:200px;overflow:auto;border:1px solid green;"></div>
33
34 <script>
35 function protocolIt(str){
36 var p = document.getElementById("protocol")
37 p.innerHTML = "<li>"+str+"</li>" + p.innerHTML
38 }
39
40 function doOnCellEdit(stage,rowId,cellInd){
41 if(stage==0){
42 protocolIt("User starting cell editing: row id is"+rowId+", cell index is "+cellInd)
43 }else if(stage==1){
44 protocolIt("Cell editor opened");
45 protocolIt("旧值:" + mygrid.cells(mygrid.getSelectedId(),mygrid.getSelectedCellIndex()).getValue());
46 }else if(stage==2){
47 protocolIt("Cell editor closed");
48 protocolIt("新值:" + mygrid.cells(mygrid.getSelectedId(),mygrid.getSelectedCellIndex()).getValue());
49 }
50 return true;
51 }
52
53
54 mygrid = new dhtmlXGridObject('gridbox');
55 mygrid.setImagePath("../images/");
56 mygrid.setHeader("代码,姓名,性别,出生日期,所在部门,电邮,月薪,休假");
57 mygrid.setInitWidths("30,50,40,80,60,140,50,80")
58 mygrid.setColAlign("center,left,center,left,center,left,right,center")
59 mygrid.setColTypes("ro,ed,co,calendar,co,link,price,ch");
60 // 设置第2列的列表框,首列为第0列
61 mygrid.getCombo(2).put(0,"女");
62 mygrid.getCombo(2).put(1,"男");
63 // 设置第4列的列表框,首列为第0列
64 mygrid.getCombo(4).put(1,"西游");
65 mygrid.getCombo(4).put(2,"水浒");
66 mygrid.getCombo(4).put(3,"红楼");
67 mygrid.getCombo(4).put(4,"三国");
68 // 设置列排序种类
69 mygrid.setColSorting("int,str,str,date,str,str,int,str");
70 mygrid.setColumnColor("#d5f1ff,#d5f1ff"); //设置列背景颜色
71 mygrid.setColumnMinWidth(50,0);
72 //mygrid.setSkin("xp"); //XP风格
73 mygrid.enableAlterCss("even","uneven"); //颜色交替
74 //mygrid.enableLightMouseNavigation(true); //鼠标导航
75 //mygrid.enableKeyboardSupport(true); //热键
76 mygrid.setOnEditCellHandler(doOnCellEdit); //编辑事件
77 mygrid.init();
78 mygrid.loadXML("test_grid.xml");
79
80 </script>
81 </body>
82 </html>


  • r14:Grid的样式文件
  • r15:calendar插件需设此变量
  • r16~r18:grid控件库
  • r19~r23:插件库
  • r25:grid容器
  • r35~r51:grid的cell编辑事件处理函数,由r79指定
  • r54~r78:grid的创建及设定
所用参数可以参照自带的文档。

本地化

货币符号

dhtmlXGridCell.js:r802

Calendar的汉化以及日期的格式(年/月/日)
  • calendar.js:r27
    • 把英文改成相应的中文
    • 年月日的排列,参见这里
  • calendar_init.js:r14~r20
    • val这个变量存取的就是日期字串,这里就是把字串转换成一个数组分别来存储年月日。可以根据需要修改格式。
  • dhtmlXGrid_excell_calendar.js:r61
    • y,m,d就是年月日,可以修改隔式。

2007年4月5日星期四

关于《巧做Web Database Grid》

这是一部实训教程,讲述了Web数据库控件的开发技术。其中所应用到的技术均为开源资源(GPL许可),主要涉及到的有:

本教程的内容遵循GNU Free Documentation License,目的在于提供快捷的技术资讯,并防止创作者承担任何法律责任。

任何人都可以在GNU Free Documentation License 1.2或以后所发行的许可之下,复制、散布及/或修改任何有关技术内容。

您可以免费
  • 复制、散布和呈现本教程
  • 制作衍生作品
  • 将创作用于商业用途
但必须基于以下条款
  • 您的作品必须以GFDL的形式发布
  • 署名,您必须标明作者的名字(在底下,吼吼~)
  • 您必须提供取得材料的方法,请在明显的地方注名教程主页的网址
  • 二次使用或散布,您应该让其他人明了当前创作的授权条款
本教程适用的学习者应具备如下基础:
  • 有使用MySQL的简单经验
  • 基础的PHP编程知识
  • 熟悉xhtml/css和JavaScript语言
本教程主要利用了Google所提供的一些免费资源
感谢我的妻子和岳母,她们对我的工作提供了大量的支持。
最后将此教程献给我的儿子,将近4个月的刀刀。

教程作者:Jerry66x