javascript - 可编辑表格控件 支持全键盘操作(无JS框架)

项目中经常会用到表格编辑控件，网上也有不少，但是确实没有完全符合我要求的，

自己写一个吧！

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#）

 using System;
 using System.Collections;
 using System.Configuration;
 using System.Data;
 using System.Web;
 using System.Web.Security;
 using System.Web.UI;
 using System.Web.UI.HtmlControls;
 using System.Web.UI.WebControls;
 using System.Web.UI.WebControls.WebParts;
 using Newtonsoft.Json;

 namespace HTGridEditorTest
 {
     public partial class _Default : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {
             string hgeAjax = Request["HGE_AJAX_VER"];//HGE_AJAX_VER HtGridEditor Ajax版本
             if ((hgeAjax != null) && (hgeAjax == "1_0_0"))//HtGridEditor请求的数据 版本号 一般通过这个标识判断是否为 HtGridEditor的ajax请求
             {
                 if (Request["method"] == "REFRESH")
                 {
                     Response.Clear();
                     HgeCommand c = new HgeCommand();
                     c.cmd = "refresh";
                     ][];
                     Random r = new Random();
                     ; i < ; i++)
                     {
                         data[i] = ];
                         data[i][] = (i + ).ToString();
                         data[i][] = ).ToString();
                         data[i][] = r.Next().ToString();
                         data[i][] = "ccc";
                         data[i][] = "ddd";
                     }
                     c.data = data;
                     Response.Write(JsonConvert.SerializeObject(c));
                     Response.End();
                 }
                 else if (Request["method"] == "REMOVED")//method 操作类型 REMOVED删除行 CREATED新建行
                 {
                     Response.Clear();
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data = "delete one row "+Request["OROW"];
                     HgeCommand[] cs = ];
                     cs[] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();
                 }
                 else if (Request["method"] == "CREATED")
                 {
                     Response.Clear();
                     string str = Request["OROW"];//新建的行的值
                     string[] arr = JsonConvert.DeserializeObject<string[]>(str);
                     string resps = "";
                     ; i < arr.Length; i++) resps += arr[i] + ",";
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data = "create a new row data:" + resps.Trim(',');
                     HgeCommand[] cs = ];
                     cs[] = c;
                    // Response.Write(JsonConvert.SerializeObject(cs));
                     //Response.End();
                 }
                 else if (Request["method"] == "CHANGED")//选择行改变
                 {
                     Response.Clear();
                     string str = Request["NROW"];
                     string[] arr = JsonConvert.DeserializeObject<string[]>(str);
                     string resps = "";
                     ; i < arr.Length; i++) resps += arr[i] + ",";
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data ="select row changed data:" + resps.Trim(',');
                     HgeCommand[] cs = ];
                     cs[] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();
                 }
                 else if (Request["method"] == "SAVED")//保存数据
                 {
                     Response.Clear();
                     string[][] arr = JsonConvert.DeserializeObject<string[][]>(Request["SVDATA"]);
                     string resps = "";
                     ; i < arr.Length; i++)
                     {
                         resps += "[";
                         ; j < arr[i].Length; j++)
                         {
                             resps += arr[i][j] + ",";
                         }
                         resps = resps.Trim(',') + "],";
                     }
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data = "select row saved data:" + resps.Trim(',');
                     HgeCommand[] cs = ];
                     cs[] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();
                 }
                 else if(Request["method"]=="TXTCHANGED"){//文本改变
                     Response.Clear();
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data ="input changed in row " + Request["IROW"]
                         + " and cell " + Request["ICELL"] + " and value " + Request["VALUE"]+" and row value "+Request["OROW"];
                     HgeCommand[] cs = ];
                     cs[] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();
                 }
                 else if (Request["method"] == "FOCUSNEXT")//当前编辑文本因为按enter失去焦点
                 {
                     Response.Clear();
                     HgeCommand c = new HgeCommand();
                     c.cmd = "message";
                     c.data = "focus next in row " + Request["IROW"]
                          + " and cell " + Request["ICELL"] + " and value " + Request["VALUE"] +" and row value "+ Request["OROW"];
                     HgeCommand[] cs = ];
                     cs[] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();

                     //服务器端可以使用如下的命令控制客互端的行为 命令的详细说明见 HtGridEditor.js
                     /*HgeCommand c = new HgeCommand();
                     c.cmd="message";
                     c.data=" hello HtGridEditor !";*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "selectopitons";
                     c.icell = "4";
                     c.selectvalue = "5555";
                     string[][] options=new string[6][];
                     options[0] = new string[2] { "EEEE", "1111" };
                     options[1] = new string[2] { "FFFF", "2222" };
                     options[2] = new string[2] { "GGGG", "3333" };
                     options[3] = new string[2] { "HHHH", "4444" };
                     options[4] = new string[2] { "IIII", "5555" };
                     options[5] = new string[2] { "JJJJ", "6666" };
                     c.data = options;
                     c.select_cache = "cache";*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "setcell";
                     c.data = new string[3] { "1", "2", "hello test setcell command" };*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "setcells";
                     string[][] cells = new string[3][];
                     cells[0] = new string[3] {"1","2","test setcells command"};
                     cells[1] = new string[3] {"2","4","aaa"};
                     c.data = cells;*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "setrow";
                     c.data = new string[5]{"2", "cell a", "cell b", "cell c", "bbb"};*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "setrowedit";
                     c.data = "4";*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "setcellfocus";
                     c.data = "2";*/

                     /*HgeCommand c = new HgeCommand();
                     c.cmd = "newrow";
                     c.data = "focus";*/

                     /*HgeCommand[] cs = new HgeCommand[1];
                     cs[0] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();*/

                     //也可以由若干命令组合使用 前端会按顺序执行
                     //如：新建一行 使其获得焦点 且中当前列
                    /* HgeCommand[] cs = new HgeCommand[2];
                     HgeCommand c = new HgeCommand();//新建一行
                     c.cmd = "newrow";
                     c.data = "focus";
                     cs[0] = c;
                     c = new HgeCommand();//使新行的当前列获得焦点
                     c.cmd = "setcellfocus";
                     c.data = Request["ICELL"];
                     cs[1] = c;
                     Response.Write(JsonConvert.SerializeObject(cs));
                     Response.End();*/
                 }
             }
             else
             {

             }

         }

     }
     public class HgeCommand
     {
         public string cmd;
         public string icell;
         public string selectvalue;
         public string select_cache;
         public object data;
     }
 }