首页 > 代码库 > 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 }