标签：des style blog http java color
项目中经常会用到表格编辑控件，网上也有不少，但是确实没有完全符合我要求的，
自己写一个吧！
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
标签：des style blog http java color
原文地址：http://www.cnblogs.com/dint/p/3834697.html
