可编辑的 HTML JavaScript 表格控件 DataGrid II

最新推荐文章于 2023-05-11 10:13:17 发布
最新推荐文章于 2023-05-11 10:13:17 发布
阅读量2.2k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript datagrid html button input import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jordan119/article/details/16677
版权

新加入了表格的日期选择功能，和单元格列表选择功能，我会继续更新加入跟多的新功能，希望大家关注支持我

 

//调用界面///

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript1.2" src="../../js/DatGrid.js"></script>
<script language="javascript1.2" src="../../js/setdate.js"></script>
</head>

<body>
<input type="button" onClick="InsertRow('tableId');" value="插入行">
<input type="button" onClick="DeleteRow('tableId');" value="删除尾行">
<input type="button" onClick="getData('tableId','specForm');" value="保存数据">
<input type="button" onClick="DeleteOneRow('tableId',currRowIndex)" value="删除指定行">
<input type="button" onClick="orderTB(document.getElementById('tableId'),3);" value="对指定列排序">

<script language="javascript1.2">
 
 InitColRow(3,4);      //初始化表格行列
 

 //==========================================所有初始化数据=========================================

 var head = new Array(col);    //标题头数组
 for(var i=0;i<head.length;i++)
  head[i] = 1;
 
 var colPropertys = new Array(col)  //初始化行列读些属性
 for(var i=0;i<colPropertys.length;i++)
  colPropertys[i] = 1;
 
 var colDefValues = new Array(col)  //初始化列将要装入的默认值
 for(var i=0;i<colDefValues.length;i++)
  colDefValues[i] = "";
 
 var dArray = new Array(col*row);  //装入修改时需要用的修改前的数据
 var m=0,n=0;
 for(m=0;m<row;m++)//行
 {
  for(n=0;n<col;n++)//列
  {
   dArray[m*col + n] ="" + m + "," + n + "";  //注意这里代表2维数组
  }
 }
 
 var colOpMode = new Array(col);  //列操作方式设置
 
 colOpMode[1] = "http://localhost:8000/TaxWeb/AgreementCtrlAction.do?action=6";
 colOpMode[3] = "No.do";
 colOpMode[0] = "date";

 //=================================================================================================
 
 //初始化表格数据
 init(head,colPropertys,colDefValues,dArray,colOpMode);
 
 //创建表格
 CreateTable('specForm','1','sub.jsp','tableId',col,row);
</script>

</body>
</html>

/

到这里下载：http://www.iecn.net/forum/attachment.php?s=&postid=39730

jordan119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
开源在线excel编辑器_轻量级的原生JavaScript的Excel插件——JExcel
weixin_39546520的博客
11-27 1519
介绍jExcel是一个轻量级的原生javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格。可以从JS数组，JSON，CSV或XSLX文件创建在线电子表格表。可以从excel复制并直接粘贴到jExcel电子表格，反之亦然。集成任何第三方javascript插件非常容易，可以创建自己的自定义列，自定义编辑器，并在应用程序中自定义任何功能。jExcel...
前端开发：非常好用的 JavaScript表格控件
choujuegua3942的博客
08-18 2075
此文为大家整理出几款非常好用的JavaScript 表格控件分享给大家，希望对大家有所帮助！ 1.Handsontable（用纯JavaScript，也可与 AngularJS指令 和聚合物组成。） 2.JsGrid（基于jQuery的轻量级客户端数据网格控件。它支持基本的网格操作，如...
组件化的可编辑数据表格
DyingNights的博客
05-11 154
然后，我们遍历所有单元格，获取其所在的行和列的索引值，并将更新后的数据保存到tableData数组中。2. 数据表格的渲染：我们使用Element-UI组件库中的el-table组件，根据tableData和tableColumns数组，渲染出表格的HTML结构。2. 数据的处理：获取到数据后，我们需要对数据进行处理，包括数据的过滤、排序、分页等操作。3. 数据的编辑：当用户需要编辑表格数据时，我们通过edit事件监听到用户的操作，并将当前编辑的行和列的索引值保存下来。
推荐7款优秀的vue table数据表格组件
热门推荐
CamphorBlossom的博客
03-07 1万+
数据表格（datatable ）组件旨在为Web 应用程序上表示和操作表格数据提供一种简单方便的解决方案。它允许用户以灵活、强大的方式过滤、格式化、分页、编辑、排序、添加和删除其数据。
Web表格控件[参照].pdf
10-20
Web表格控件[参照].pdf
HTML基本语法及常用组件[web前端]
m0_58450531的博客
09-06 2117
HTML：超文本标记语言 (HyperText Markup Language)。超文本：指的是网页中可以显示的内容，例如图片、链接、音频、视频......标记：指的是标签，通过标记符号来告诉浏览器网页内容该如何显示(如：商品的标签、衣服上的标签，介绍衣服信息) ，html语言中提供了许多的标签，我们可以使用标签来编写网页，最终通过浏览器进行翻译，呈现最终的效果，也就是通过标签来编写网页内容。
Web表格控件 SlickGrid
sweetgirl520的博客
05-26 7494
SlickGrid 是一个JavaScript编写的数据控件，其采用数据虚拟显示的特性备受后来的Grid推崇，如ExtJS DataGrid，其架构设计优秀，UI交互功能非常丰富，插件化的可扩展功能开发非常值得Web开发人员学习 SlickGrid简单介绍 : https://github.com/mleibman/SlickGrid/wiki 快速入门 : https://githu
ASP.NET WEB 数据控件GridView
ba_wang_mao的专栏
06-23 1333
https://www.cnblogs.com/HuiTai/p/huitai_Net9.html https://www.cnblogs.com/HuiTai/p/huitai_Net9.html
整理了12款Javascript 表格控件(DataGrid)
09-22
12款JavaScript表格控件。表格控件(DataGrid )允许最终用户阅读和写入到绝大多数数据库的应用程序。DataGrid 控件可以在设计时快速进行配置，只需少量代码或无需代码。
原生javascript实现简单的datagrid数据表格
10-24
主要介绍了原生javascript实现简单的datagrid数据表格的方法，效果十分棒,需要的朋友可以参考下
特别好的web表格控件
04-27
一个特别好的表格控件希望大家喜欢，js脚本写的，功能实用
一款web表格插件
03-15
Girdmanager表格插件 适用于oa cms crm等后台管理系统 功能齐全
web表格插件-GridManager
05-07
一款功能强大的web表格插件，适用于oa cms crm等后台管理系统 功能齐全。
web表格
04-11
NULL 博文链接：https://hoochiang.iteye.com/blog/1680141
WEB表格控件 DateTables
03-07
开源的WEB表格控件 DateTables
EasyUI可扩展Editable DataGrid（可编辑数据表格）
08-10
NULL 博文链接：https://focus-sunbo.iteye.com/blog/2198721
可编辑的datagrid表格控件
05-02
可编辑的datagrid表格控件,有需要的快来啊
datagrid不可编辑行有关问题的控制方法
10-26
datagrid不可编辑行一个更简单的办法，editable=“true”，然后直接把itemEditBegin给停掉阻止createItemEditor的调用
web表格（详解）
m0_52896041的博客
11-27 4044
web表格（详解）
使用DataGrid控件展示数据表格
最新发布
06-08
好的，使用DataGrid控件展示数据表格的步骤如下： 1. 在窗体中添加DataGrid控件。可以在工具箱中找到DataGrid控件，将其拖拽到窗体中。 2. 配置DataGrid控件的属性。可以通过点击DataGrid控件，然后在属性窗口中设置数据源、列名、行高、字体等属性。 3. 绑定数据源。可以通过代码或者设计器的方式将数据源与DataGrid控件进行绑定。 4. 调整布局。根据实际需求，可以调整DataGrid控件的大小、列宽、行数等。 5. 运行程序，查看DataGrid控件展示的数据表格效果。 以上是展示数据表格的基本步骤，具体实现方式可能因为不同的编程语言和开发环境而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值