首页 > 代码库 > javascript可编辑表格控件 支持全键盘操作
javascript可编辑表格控件 支持全键盘操作
项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的,
自己写一个吧!
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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/"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 = http://www.mamicode.com/"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 =http://www.mamicode.com/"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 = http://www.mamicode.com/"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 =http://www.mamicode.com/"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 = http://www.mamicode.com/"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.js130 /*HgeCommand c = new HgeCommand();131 c.cmd="message";132 c.data="http://www.mamicode.com/hello HtGridEditor !";*/133 134 135 /*HgeCommand c = new HgeCommand();136 c.cmd = "selectopitons";137 c.icell = "4";138 c.selectvalue = "http://www.mamicode.com/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 = http://www.mamicode.com/options;>147 c.select_cache = "cache";*/148 149 150 /*HgeCommand c = new HgeCommand();151 c.cmd = "setcell";152 c.data = http://www.mamicode.com/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 = http://www.mamicode.com/cells;*/160 161 /*HgeCommand c = new HgeCommand();162 c.cmd = "setrow";163 c.data = http://www.mamicode.com/new string[5]{"2", "cell a", "cell b", "cell c", "bbb"};*/164 165 /*HgeCommand c = new HgeCommand();166 c.cmd = "setrowedit";167 c.data = "http://www.mamicode.com/4";*/168 169 /*HgeCommand c = new HgeCommand();170 c.cmd = "setcellfocus";171 c.data = "http://www.mamicode.com/2";*/172 173 /*HgeCommand c = new HgeCommand();174 c.cmd = "newrow";175 c.data = "http://www.mamicode.com/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 = "http://www.mamicode.com/focus";188 cs[0] = c;189 c = new HgeCommand();//使新行的当前列获得焦点190 c.cmd = "setcellfocus";191 c.data = http://www.mamicode.com/Request["ICELL"];192 cs[1] = c;193 Response.Write(JsonConvert.SerializeObject(cs));194 Response.End();*/195 }196 }197 else198 {199 200 }201 202 }203 204 }205 public class HgeCommand206 {207 public string cmd;208 public string icell;209 public string selectvalue;210 public string select_cache;211 public object data;212 }213 }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。