春华秋实

玫瑰花瓣｜雨丝

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就是年月日，可以修改隔式。

发帖者 Jerry 发于 14:56

标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)