js模拟datagrid

最新推荐文章于 2025-05-22 11:28:32 发布
最新推荐文章于 2025-05-22 11:28:32 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： datagrid function border javascript html 教育
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/guoguo19811025/article/details/1135362
最近发现越来越懒,做后台管理对数据进行修改的时候老是做新页面,然后显示要修改的数据,用户修改,提交,太麻烦了,主要还要做一张新页面,关键还要美工,内容那么少,就那几个字段,多做一张页面真是浪费,因为是用java开发,不可能有datagrid控件的,所以这里就想模拟一个,代码比较简单.不要见笑阿!
<html>
  <head><title>Simple jsp page</title>
  <style>
    .input    {border:1 solid #000;width:80px;}
    span    {cursor:hand;COLOR:BLUE;}
  </style>
  </head>
  <body>
    <div style="width:800;margin-left:expression((document.body.clientWidth-this.clientWidth)/2);">
        <form name="form1" method="post">
    
        <ul class="deplist">教科院
            <li>
                <TABLE width=800 cellspacing=0 cellpadding = 1 border=1 borderColor="#E6E6E6">
                    <TR class=bgcolor align=center>
                        <TD width=80 >选择</TD>
                        
                        <td>姓名</td>
                        <TD>院系名称</TD>
                        <TD>专业名称</TD>
                        <td>验证码</td>
                        <TD>操作</TD>
                    </TR>

                    <TR align=center>
                        <TD width=80 align=center><input type=checkbox name="dep" value=19></TD>
                        
                        <TD>张三</TD>
                        <TD>教科院</TD>
                        <TD>教育技术学</TD>
                        <TD>123343.0</TD>
                        <TD><span onclick="edit(this)">编辑</span></TD>
                    </TR>

                    <TR align=center>
                        <TD width=80 align=center><input type=checkbox name="dep" value=19></TD>
                        
                        <TD>张三</TD>
                        <TD>教科院</TD>
                        <TD>教育技术学</TD>
                        <TD>123343.0</TD>
                        <TD><span onclick="edit(this)">编辑</span></TD>
                    </TR>
                 </TABLE>
            </li>
        </ul>
        </form>

        <SCRIPT LANGUAGE="JavaScript">
        <!--
            var arr = new Array();
            function edit(obj){
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                var val = "";
                for(i = 1;i<len-1;i++){
                    val = ele.cells[i].innerText
                    ele.cells[i].innerHTML = "<input class='input' type=text name='t"+i+"' value="+val+">";    
                    arr[i-1] = val;
                }
                obj.parentElement.innerHTML = "<span onclick='mod(this)'>修改</span> <span onclick='cancel(this)'>取消</span>";
            }

            function mod(obj){
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                for(i = 1;i<len-1;i++){
                    ele.cells[i].innerText = ele.cells[i].children[0].value;    
                }
                obj.parentElement.innerHTML = "<span onclick='edit(this)'>编辑</span>";
            }

            function cancel(obj){
                var ele = obj.parentElement.parentElement;
                var len = ele.cells.length;
                for(i = 1;i<len-1;i++){
                    ele.cells[i].innerText = arr[i-1];    
                }
                obj.parentElement.innerHTML = "<span onclick='edit(this)'>编辑</span>";        
            }
        //-->
        </SCRIPT>
    </div>
  </body>
</html>
 
Js DataGrid
07-29
一个非常好看完美的js写的DataGrid，支持单元格编辑，拖拽，ajax分页，新增行，排序，样子非常好看
12款 JavaScript 表格控件（DataGrid）
weixin_34112208的博客
07-13 866
JavaScript 表格控件可以操作大数据集的 HTML表格，提供各种功能，如分页、排序、过滤以及行编辑。在本文中，我们整理了13个最好的 JavaScript 表格插件分享给开发人员，开发者可以很容易地添加表格操作功能到Web应用程序中。 1. DataTables DataTables插件是为the jquery JavaScript库。它是基于高度灵活的工具，在foundations o...
使用JS和HTML实现Datagrid操作
最新发布
weixin_30838971的博客
05-22 728
Datagrid，顾名思义，是一种以网格形式展示数据的组件。在各种应用程序中，特别是后台管理界面中，Datagrid用于以结构化、易于操作的格式展示大量数据。无论是复杂的表格还是简单的列表，Datagrid都能高效地完成这项任务。它不仅提供基本的展示功能，还可以处理数据的排序、过滤、分页等，使得用户能快速定位和处理信息。
js之datagrid
热门推荐
xclsky的博客
12-28 1万+
1 js中的datagrid需要添加两个css和两个js， 如： 顺序不要颠倒，不然会出错。 而且需要将jsp语法去掉，例如去掉： 2js中的datagrid是从后台得到json类型的数据，json类型的数据必须是像这样：{total:"10",rows:[{a:"a",b:"b"},{d:"d",e:"e"}]} 从后台传递过来的json数据类型，通
DataGrid-JS
07-22
DataGrid JS javascript.DataGrid JS javascriptDataGrid JS javascript
模拟一个可编辑的DataGrid
攀升·Lislie
11-15 1438
    上一篇文章长篇累牍，不知所云。让我把进度加起来，我们只谈技术。    有时候你会碰到这样的需求，DataGrid中有若干可编辑项，输入信息，点击添加后，DataGrid就添加一行数据，如此多次重复，直到所有数据添加完，点一个按钮，统一保存到数据库。这样设计的一个优势在于，数据添加的工作可以放到一个事务中。    我老大说这样的DataGrid是有的，不过最近他没研究过，而我尝试时，
JavaScript实现模拟EXT效果的DataGrid组件
在这个知识点中，我们将详细探讨如何使用JavaScript来模仿EXT JS框架中著名的DataGrid组件的效果。EXT JS是一个广泛使用的JavaScript框架，它提供了一整套丰富的UI组件，用以构建高性能和美观的Web应用程序界面。...
easyui datagrid 表格 打印
05-21
2. **JavaScript处理**：使用JavaScript获取DataGrid中的数据。这通常通过调用`datagrid('getRows')`方法来实现，这将返回所有行的数据对象数组。 3. **数据格式化**：将DataGrid中的数据与`formatter`函数结合，...
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
11-28
本文实例讲述了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法。... //模拟测试加载成功后数据Id大于20的都勾选中，并禁用checkbox for (var i = 0; i < data> 20) { dgObj.datagrid('checkRow', i);
jQuery EasyUI datagrid实现本地分页的方法
10-24
综上所述，通过实例代码与详细解析，展示了如何使用jQuery EasyUI datagrid组件，结合JavaScript的数组操作和事件监听功能，实现前端的本地分页。这种实现方式可以提高前端的处理能力，但在实际应用中还需要根据数据...
easyui datagrid 导出到excel
01-18
EasyUI Datagrid是基于HTML和JavaScript的，它使用了jQuery库来简化DOM操作和事件处理。Datagrid提供了一个灵活的表格布局，可以轻松地处理大量数据，并支持多种自定义选项，如列宽调整、行选择、复选框选择等。 2...
datagrid-groupview.js
10-23
用jquery easyui datagrid作表格时候，用此js制作出分组效果，包含例子。
javascript实现datagrid
06-17
javascript实现datagrid,支持事件以及参数传递
一个基于Js封装的网页DataGrid表格
05-12
内容索引:脚本资源,Ajax/JavaScript,DataGrid　　一个基于Js封装的网页DataGrid表格，实用漂亮的表格封装类，用javaScript编写的，有普通风格和仿XP风格两种。每款风格都可以通过点击表头来进行排序，支持复选框，点击按钮演示了如何获取选中的值，对网页编程的朋友来说是个不错的JS控件。
js实现功能强大的DataGridView(兼容各主流浏览器)
08-10
兼容性:各版本浏览器通用.兼容ie,火狐,360等主流浏览器. 产品特点:DataGridView控件可移动,可隐藏和显示,列宽可调整, 功能强大,界面人性化.可用于动态现实数据或作为输入数据的 数据源. 使用步骤: 1.打开IIS,新建一个网站. 2.设置为DataGridView.html为默认文档. 3.在iis中浏览,如果设置正确应该可以浏览了 . 4.点击按钮即自动生成和显示datagridview,点击关闭则关闭控件.
js实现功能强大的DataGridView
08-10
兼容性:各版本浏览器通用.兼容ie,火狐,360等主流浏览器. 产品特点:DataGridView控件可移动,可隐藏和显示,列宽可调整, 功能强大,界面人性化.可用于动态现实数据或作为输入数据的 数据源. 使用步骤: 1.打开IIS,新建一个网站. 2.设置为DataGridView.html为默认文档. 3.在iis中浏览,如果设置正确应该可以浏览了 . 4.点击按钮即自动生成和显示datagridview,点击关闭则关闭控件.
htmlTable 模拟实现datagrid等的部分功能.
烟缸
08-22 890
项目介绍:xx 资源管理 时间:2007年6月开始本项目,有个自定义报表的功能,要用到一些类似datagrid这样的控件来显示数据，但是，由于这些控件不能够满足系统一些需求,因此,希望能够做出一个轻量级的东西来实现这些控件的一些功能.因此,才有了本文章:相信大家都知道,用datagrid等控件,做自定义表头,是很麻烦的事情,并且,考虑一些效率上(个人认为,程序很大部分的时间都花费在
javascript 实现datagrid
高级项目经理、专注于技术架构、分享项目管理及职场心得
06-17 1796
1、本文主要是实现datagrid,分页采取的jQuery.pagination.js,首先我们需要引入jQuery与jQuery.pagination.js,然后实现datagrid，代码如下：
用javascript加载datagrid
qq_44925898的博客
05-03 504
从数据中获取数据，根据前端输入的查询条件，生成datagrid数据表。 .js端 //加载表格 function loadTable(SearchSource1,SearchSource2...){ $('#dg').datagrid({ url:"*****.ashx", // 指向一个后台的地址，自动往后台发送pageSize，pageNumber height:700, //高度 fitColumns:true, //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值