easyui 可编辑datagrid 范例 亲测有效

最新推荐文章于 2024-06-10 16:05:11 发布
最新推荐文章于 2024-06-10 16:05:11 发布
阅读量794 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hetongun/article/details/79254583
版权 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>测试报表</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../easyui/themes/color.css">

<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/print.js"></script>
<style type="text/css">
html,body {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-family: "宋体";
}
</style>
</head>
<body>
 <div>       
     @* 定义table  *@  
     <table id ="dg" class="easyui-datagrid" style="width: auto; height: auto;" title="企业经营管理人才类别情况统计表2" 
     data-options="
     url:'/EnterpriseManagement2/FillData',
     fitColumns:true,
     singleSelect:true,
     pageSize:10,
     iconCls:'icon-edit',
     method:'get',
     onClickCell:onClickCell" ">  
      @*复杂表头的处理，合并单元格*@  
        <thead>                 
            <tr>  
                <th  rowspan="2">项目</th>  
                <th  rowspan="2">合计</th>  
                <th  rowspan="2">女士</th>  
                <th colspan="5">学历</th>  
                <th colspan="6">年龄</th>  
                <th rowspan="2">自主创业</th>  
                <th  rowspan="2">再就业人数</th>  
                <th  rowspan="2">拥有专利人数</th>  
                <th  rowspan="2">拥有执业资格人数</th>            
            </tr>  
            <tr>  
                <th >研究生</th>  
                <th >大学本科</th>  
                <th >大学专科</th>  
                <th >中专</th>  
                <th >高中及以下</th>  
                <th >35岁以下</th>  
                <th >36-40岁</th>  
                <th >41-45岁</th>  
                <th >46-50岁</th>  
                <th >51-54岁</th>  
                <th >55岁以上</th>  
            </tr>  
            <tr>  
                <th data-options="field:'sumID',width:137,align:'center'">甲</th>  
                <th data-options="field:'one',width:70,align:'center',editor:'text'">1</th>  
                <th data-options="field:'two',width:70,align:'center',editor:'text'">2</th>  
                <th data-options="field:'three',width:70,align:'center',editor:'text'">3</th>  
                <th data-options="field:'four',width:70,align:'center',editor:'text'">4</th>  
                <th data-options="field:'five',width:70,align:'center',editor:'text'">5</th>  
                <th data-options="field:'six',width:70,align:'center',editor:'text'">6</th>  
                <th data-options="field:'seven',width:70,align:'center',editor:'text'">7</th>  
                <th data-options="field:'eight',width:70,align:'center',editor:'text'">8</th>  
                <th data-options="field:'night',width:70,align:'center',editor:'text'">9</th>  
                <th data-options="field:'ten',width:70,align:'center',editor:'text'">10</th>  
                <th data-options="field:'eleven',width:70,align:'center',editor:'text'">11</th>  
                <th data-options="field:'twelve',width:70,align:'center',editor:'text'">12</th>  
                <th data-options="field:'thirteen',width:70,align:'center',editor:'text'">13</th>  
                <th data-options="field:'fourteen',width:70,align:'center',editor:'text'">14</th>  
                <th data-options="field:'fifteen',width:70,align:'center',editor:'text'">15</th>  
                <th data-options="field:'sixteen',width:85,align:'center',editor:'text'">16</th>  
                <th data-options="field:'seventeen',width:110,align:'center',editor:'text'">17</th>  
            </tr>            
        </thead>  
        
        <tr>
        	<td data-options="field:'seventeen',width:110,align:'center',editor:'text'" >123</td>
        	<td data-options="field:'seven',width:110,align:'center',editor:'text'" >123</td>
        </tr> 
         <tr>
        	<td data-options="field:'seventeen',width:110,align:'center',editor:'text'" >123</td>
        	<td data-options="field:'seven',width:110,align:'center',editor:'text'" >123</td>
        </tr> 
    </table>  
  
  
  
 @* 可编辑表格单机触发*@  
<script type="text/javascript">  
            $.extend($.fn.datagrid.methods, {  
                editCell: function (jq, param) {  
                    return jq.each(function () {  
                        var opts = $(this).datagrid('options');  
                        var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));  
                        for (var i = 0; i < fields.length; i++) {  
                            var col = $(this).datagrid('getColumnOption', fields[i]);  
                            col.editor1 = col.editor;  
                            if (fields[i] != param.field) {  
                                col.editor = null;  
                            }  
                        }  
                        $(this).datagrid('beginEdit', param.index);  
                        for (var i = 0; i < fields.length; i++) {  
                            var col = $(this).datagrid('getColumnOption', fields[i]);  
                            col.editor = col.editor1;  
                        }  
                    });  
                }  
            });  
  
            var editIndex = undefined;  
            function endEditing() {  
                if (editIndex == undefined) { return true }  
                if ($('#dg').datagrid('validateRow', editIndex)) {  
                    $('#dg').datagrid('endEdit', editIndex);  
                    editIndex = undefined;  
                    return true;  
                } else {  
                    return false;  
                }  
            }  
            function onClickCell(index, field) {  
                if (endEditing()) {  
                    $('#dg').datagrid('selectRow', index)  
                            .datagrid('editCell', { index: index, field: field });  
                    editIndex = index;  
                }  
            }  
</script>  
    </div>  
</body>
	
</html>


HE-Tongkun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUI可扩展Editable DataGrid（可编辑数据表格）
08-10
NULL 博文链接：https://focus-sunbo.iteye.com/blog/2198721
EasyUI 之datagrid 使用[转]
zhglhy的专栏
12-05 148
EasyUI 之datagrid 使用 来自：http://ycx211314.blog.163.com/blog/static/101670862011229105845754/ 可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title ...
easyUI之datagrid（数据表格）使用
最新发布
2401_85123734的博客
06-10 595
每个表都需要建立相应的js建立book.js将demo文件中的datagrid.data1.json复制到WebContent目录下book.js代码如下：/*** 注意：js文件中不支持el表达式*/columns:[[{field:‘productname’,title:‘名称’,width:100},{field:‘unitcost’,title:‘价格’,width:100,align:‘right’}]]});})建立实体类Bookreturn bid;
easyui-datagrid
junmoxie的专栏
08-01 1442
动态改变他的url,并出传入参数： $("#projectlisttable").treegrid({ url:url, queryParams:{sbny:sbny,zdxlx:zdxlx,jslx:jslx,proivnce:proivnce,city:city,county
easyui---datagrid
weixin_33816821的博客
10-27 90
$("#tableid").datagrid({ url:"servlet1/userServlet1?method=getList",//ajax请求 height:400, width:1000, fitColumns:true,//扩大或缩小列的尺寸以适应表格的宽度 ...
easyUI之datagrid
墨笙弘一
04-21 3476
这篇博文打算总结一下，我在项目中使用前端框架easyUI所遇到的一些用法。 先按照下面的图片说三个小的easyUI datagrid中的用法： 1.在easyUI datagrid中每条记录前面显示复选框，并且可以实现单选和全选功能 代码实现如下：{field:'checked',title:'<input type="checkbox" id="selectAll">',width:'2
easyui 可编辑datagrid完整例子，支持filebox
02-17
在“可编辑 datagrid 完整例子”中，EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持，filebox 是 EasyUI 的一个扩展，用于处理文件上传功能。 在标题和描述中提到的“可...
EasyUI中的dataGrid的行内编辑
08-30
EasyUI中的DataGrid行内编辑实现详解 EasyUI是一个流行的基于jQuery的前端UI框架，提供了许多实用的UI组件，其中包括DataGrid组件。DataGrid组件是EasyUI中最常用的一个组件，用于显示和编辑数据。然而，DataGrid...
jQuery EasyUI编辑DataGrid用combobox实现多级联动
10-21
在jQuery EasyUI中，DataGrid是一种常用的表格展示控件，它可以与各种编辑器结合使用，如combobox（下拉框）来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
easyui-datagrid可编辑可过滤的DEMO
11-08
本文将深入探讨“easyui-datagrid可编辑可过滤的DEMO”，这是一个结合了EasyUI DataGrid组件的编辑和过滤功能的示例项目。 首先，DataGrid是EasyUI中的一个核心组件，它是一个数据展示表格，可以处理大量的数据并...
easyui—DataGrid（数据表格）
qq_67785529的博客
05-07 4557
目录 一.DataGrid（数据表格） 一.DataGrid（数据表格） DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。 使用案例 1.从现有的表格元素创建DataGrid，在HTML中定义列、行和数据 <table class="easyui-datagrid"> <thead> <tr> .
jquery easy ui edatagrid 动态编辑表格 例子
09-19
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ，支持增加，编辑，删除行，日期狂，下拉框联动显示数据，测试ok
easyui的datagrid
03-20
NULL 博文链接：https://669341085.iteye.com/blog/758832
EasyUI之DataGrid（数据表格）
licmi的博客
06-27 2285
文章目录DataGrid介绍使用案例代码实现Ribbon 界面总结 DataGrid介绍 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例 实现创建DataGrid，有两种方式 第一种：在HTML中定义列 <table class="easyui-datagrid"> <
实现Easyui 可编辑表格
weixin_34384681的博客
09-27 331
一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码   &lt;div id="table_tree" class="easyui-panel" id="div_panel" style="width:550px;height:350px;padding-top:5px;overflow:auto;" data-options="b...
EasyUI——DataGrid数据显示
weixin_65975275的博客
05-11 1921
DataGrid数据显示
EasyUi datagrid
羽下佳人的博客
12-18 477
1、datagrid 属性说明 http://blog.sina.com.cn/s/blog_a4c8274a0102v9lo.html 注意：easyui-layout的div是必须要有的，不然后面高度无法直营整个屏幕 JS: $("#dg").datagrid({ url : path + '/AddressBook/sendinfojson', pagination :...
Easyui之datagrid
m0_46220187的博客
06-27 261
目录作用效果图实现代码 作用 1、数据绑定 2、增删改查功能 3、分页实现 4、样式设计 效果图 模糊查询： 分页 实现代码 建一个jsp界面先导入依赖 <!-- 全局样式 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> <!--
EasyUI DataGrid 回车切换编辑单元格实现方法
"这篇资源提供了一个关于EasyUI DataGrid编辑器中使用回车键切换单元格的示例，适用于对EasyUI有一定了解但对这一功能不熟悉的开发者。它通过JavaScript扩展了DataGrid的方法，并提供了源码参考。" 在EasyUI框架中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值