项目中经常会用到表格编辑控件，网上也有不少，但是确实没有完全符合我要求的，
自己写一个吧！
1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型
2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上，下，左，右 键操作)
3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件
4.支持统计运算，可自定义运算插件
5.兼容 Ie,chorme,firefox等绝大多数主流浏览器
下载地址：http://files.cnblogs.com/dint/WebGridEditor.rar
客户端调用代码:
<table id=‘table1‘ border=‘1‘ class=‘hgeTableCss‘ cellspacing=‘0‘ cellpadding=‘0‘ style=‘width:700px‘>
<tr>
<th style=‘width:20px‘></th>
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Address</th>
<th>Content</th>
<th>delete</th>
</tr>
<tr>
<td></td>
<td> 111</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
<script type=‘text/javascript‘>
var editor1;
var myrows=[
[‘1‘,‘2‘,‘3‘,‘bbb‘,‘5‘],
[‘1‘,‘2‘,‘3‘,‘ccc‘,‘5‘],
[‘1‘,‘2‘,‘3‘,‘aaa‘,‘5‘],
[‘1‘,‘2‘,‘3‘,‘ccc‘,‘5‘],
[‘1‘,‘2‘,‘3‘,‘bbb‘,‘5‘]
];
editor1=new HtGridEditor(‘table1‘);
editor1.bIndex=true;
editor1.datas.rows=myrows;
editor1.vWidth=‘500px‘;
editor1.Columns=[
{type:1,defv:‘111‘,funk:true}
,{type:1,defv:‘dingtao‘,change:true}
,{type:1,defv:‘hello‘,nexk:true}
,{type:2,drpItems:[{dtext:‘aaa‘,dvalue:‘aaa‘},
{dtext:‘bbb‘,dvalue:‘bbb‘},
{dtext:‘ccc‘,dvalue:‘ccc‘}],defv:‘bbb‘,change:true
}
,null
,{type:10,defv:‘del‘}
];
editor1.Footers=[{index:1,colspan:2,text:‘TotalA:{0},TotalB:{1}‘,console:[‘SUM-2‘,‘SUM-0‘]}
,{index:3,text:‘合计‘}];
editor1.bDownNew=true;
editor1.fixedHeader=true; editor1.ShowEditor();</script>
直接上效果图了
1.表头不固定，无表尾
表头不固定 有表尾
表头固定 无表尾
表头固定 有表尾
服务器端处理请求的代码 （C#）
1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.HtmlControls;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.WebControls.WebParts;
11 using Newtonsoft.Json;
12
13 namespace HTGridEditorTest
14 {
15 public partial class _Default : System.Web.UI.Page
16 {
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 string hgeAjax = Request["HGE_AJAX_VER"];//HGE_AJAX_VER HtGridEditor Ajax版本
20 if ((hgeAjax != null) && (hgeAjax == "1_0_0"))//HtGridEditor请求的数据 版本号 一般通过这个标识判断是否为 HtGridEditor的ajax请求
21 {
22 if (Request["method"] == "REFRESH")
23 {
24 Response.Clear();
25 HgeCommand c = new HgeCommand();
26 c.cmd = "refresh";
27 string[][] data = new string[100][];
28 Random r = new Random();
29 for (var i = 0; i < 100; i++)
30 {
31 data[i] = new string[5];
32 data[i][0] = (i + 10).ToString();
33 data[i][1] = "商品" + r.Next(10).ToString();
34 data[i][2] = r.Next(10000).ToString();
35 data[i][3] = "ccc";
36 data[i][4] = "ddd";
37 }
38 c.data = data;
39 Response.Write(JsonConvert.SerializeObject(c));
40 Response.End();
41 }
42 else if (Request["method"] == "REMOVED")//method 操作类型 REMOVED删除行 CREATED新建行
43 {
44 Response.Clear();
45 HgeCommand c = new HgeCommand();
46 c.cmd = "message";
47 c.data = "delete one row "+Request["OROW"];
48 HgeCommand[] cs = new HgeCommand[1];
49 cs[0] = c;
50 Response.Write(JsonConvert.SerializeObject(cs));
51 Response.End();
52 }
53 else if (Request["method"] == "CREATED")
54 {
55 Response.Clear();
56 string str = Request["OROW"];//新建的行的值
57 string[] arr = JsonConvert.DeserializeObject<string[]>(str);
58 string resps = "";
59 for (int i = 0; i < arr.Length; i++) resps += arr[i] + ",";
60 HgeCommand c = new HgeCommand();
61 c.cmd = "message";
62 c.data = "create a new row data:" + resps.Trim(‘,‘);
63 HgeCommand[] cs = new HgeCommand[1];
64 cs[0] = c;
65 // Response.Write(JsonConvert.SerializeObject(cs));
66 //Response.End();
67 }
68 else if (Request["method"] == "CHANGED")//选择行改变
69 {
70 Response.Clear();
71 string str = Request["NROW"];
72 string[] arr = JsonConvert.DeserializeObject<string[]>(str);
73 string resps = "";
74 for (int i = 0; i < arr.Length; i++) resps += arr[i] + ",";
75 HgeCommand c = new HgeCommand();
76 c.cmd = "message";
77 c.data ="select row changed data:" + resps.Trim(‘,‘);
78 HgeCommand[] cs = new HgeCommand[1];
79 cs[0] = c;
80 Response.Write(JsonConvert.SerializeObject(cs));
81 Response.End();
82 }
83 else if (Request["method"] == "SAVED")//保存数据
84 {
85 Response.Clear();
86 string[][] arr = JsonConvert.DeserializeObject<string[][]>(Request["SVDATA"]);
87 string resps = "";
88 for (int i = 0; i < arr.Length; i++)
89 {
90 resps += "[";
91 for (int j = 0; j < arr[i].Length; j++)
92 {
93 resps += arr[i][j] + ",";
94 }
95 resps = resps.Trim(‘,‘) + "],";
96 }
97 HgeCommand c = new HgeCommand();
98 c.cmd = "message";
99 c.data = "select row saved data:" + resps.Trim(‘,‘);
100 HgeCommand[] cs = new HgeCommand[1];
101 cs[0] = c;
102 Response.Write(JsonConvert.SerializeObject(cs));
103 Response.End();
104 }
105 else if(Request["method"]=="TXTCHANGED"){//文本改变
106 Response.Clear();
107 HgeCommand c = new HgeCommand();
108 c.cmd = "message";
109 c.data ="input changed in row " + Request["IROW"]
110 + " and cell " + Request["ICELL"] + " and value " + Request["VALUE"]+" and row value "+Request["OROW"];
111 HgeCommand[] cs = new HgeCommand[1];
112 cs[0] = c;
113 Response.Write(JsonConvert.SerializeObject(cs));
114 Response.End();
115 }
116 else if (Request["method"] == "FOCUSNEXT")//当前编辑文本因为按enter失去焦点
117 {
118 Response.Clear();
119 HgeCommand c = new HgeCommand();
120 c.cmd = "message";
121 c.data = "focus next in row " + Request["IROW"]
122 + " and cell " + Request["ICELL"] + " and value " + Request["VALUE"] +" and row value "+ Request["OROW"];
123 HgeCommand[] cs = new HgeCommand[1];
124 cs[0] = c;
125 Response.Write(JsonConvert.SerializeObject(cs));
126 Response.End();
127
128
129 //服务器端可以使用如下的命令控制客互端的行为 命令的详细说明见 HtGridEditor.js
130 /*HgeCommand c = new HgeCommand();
131 c.cmd="message";
132 c.data=" hello HtGridEditor !";*/
133
134
135 /*HgeCommand c = new HgeCommand();
136 c.cmd = "selectopitons";
137 c.icell = "4";
138 c.selectvalue = "5555";
139 string[][] options=new string[6][];
140 options[0] = new string[2] { "EEEE", "1111" };
141 options[1] = new string[2] { "FFFF", "2222" };
142 options[2] = new string[2] { "GGGG", "3333" };
143 options[3] = new string[2] { "HHHH", "4444" };
144 options[4] = new string[2] { "IIII", "5555" };
145 options[5] = new string[2] { "JJJJ", "6666" };
146 c.data = options;
147 c.select_cache = "cache";*/
148
149
150 /*HgeCommand c = new HgeCommand();
151 c.cmd = "setcell";
152 c.data = new string[3] { "1", "2", "hello test setcell command" };*/
153
154 /*HgeCommand c = new HgeCommand();
155 c.cmd = "setcells";
156 string[][] cells = new string[3][];
157 cells[0] = new string[3] {"1","2","test setcells command"};
158 cells[1] = new string[3] {"2","4","aaa"};
159 c.data = cells;*/
160
161 /*HgeCommand c = new HgeCommand();
162 c.cmd = "setrow";
163 c.data = new string[5]{"2", "cell a", "cell b", "cell c", "bbb"};*/
164
165 /*HgeCommand c = new HgeCommand();
166 c.cmd = "setrowedit";
167 c.data = "4";*/
168
169 /*HgeCommand c = new HgeCommand();
170 c.cmd = "setcellfocus";
171 c.data = "2";*/
172
173 /*HgeCommand c = new HgeCommand();
174 c.cmd = "newrow";
175 c.data = "focus";*/
176
177 /*HgeCommand[] cs = new HgeCommand[1];
178 cs[0] = c;
179 Response.Write(JsonConvert.SerializeObject(cs));
180 Response.End();*/
181
182 //也可以由若干命令组合使用 前端会按顺序执行
183 //如：新建一行 使其获得焦点 且中当前列
184 /* HgeCommand[] cs = new HgeCommand[2];
185 HgeCommand c = new HgeCommand();//新建一行
186 c.cmd = "newrow";
187 c.data = "focus";
188 cs[0] = c;
189 c = new HgeCommand();//使新行的当前列获得焦点
190 c.cmd = "setcellfocus";
191 c.data = Request["ICELL"];
192 cs[1] = c;
193 Response.Write(JsonConvert.SerializeObject(cs));
194 Response.End();*/
195 }
196 }
197 else
198 {
199
200 }
201
202 }
203
204 }
205 public class HgeCommand
206 {
207 public string cmd;
208 public string icell;
209 public string selectvalue;
210 public string select_cache;
211 public object data;
212 }
213 }
javascript可编辑表格控件 支持全键盘操作,布布扣,bubuko.com
时间： 2024-10-12 23:30:22