easyui 可编辑的数据网格简单的尝试

最新推荐文章于 2024-04-13 07:06:41 发布

瞬间爆炸

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量399

点赞数

分类专栏：前端文章标签： javascript 开发工具 java ViewUI

本文链接：https://blog.csdn.net/qq949527860/article/details/84855689

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jquery.edatagrid.js下载：http://www.jeasyui.net/extension/190.html在这里的实例里
直接贴代码，看看上面那个网站其实挺容易的

<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2017/2/11
  Time: 12:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/ssm/static/jquery-easyui-1.5.1/demo/demo.css">
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/ssm/static/jquery-easyui-1.5.1/jquery.edatagrid.js"></script>


</head>
<body>
<table id="dg" title="My Users" style="width:700px;height:250px"
       toolbar="#toolbar"  idField="id_"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="id_" width="50" editor="{type:'validatebox',options:{required:true}}">id_</th>
        <th field="name_" width="50" editor="{type:'validatebox',options:{required:true}}">姓名</th>
        <th field="age_" width="50" editor="text">年龄_</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
    $(function () {
        $('#dg').edatagrid({
            url: 'e_query.do',
            saveUrl: 'e_insert.do',
            updateUrl: 'e_update.do',
            destroyUrl: 'e_delete.do'   //移除一行时会传id过去，而不是id_
        });
    });
</script>
</body>
</html>

瞬间爆炸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui 可编辑的数据网格简单的尝试

jquery.edatagrid.js下载：http://www.jeasyui.net/extension/190.html在这里的实例里直接贴代码，看看上面那个网站其实挺容易的[code="jsp"] id_ 姓...
复制链接

扫一扫

专栏目录