转自:https://blog.csdn.net/l3922768721/article/details/51597977

导入js和css

<%@ page language="java" contentType="text/html;  charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

 <c:set var="ctx" value="${pageContext.request.contextPath}" />

<meta charset="UTF-8">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

<META HTTP-EQUIV="Expires" CONTENT="0">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" type="text/css" href="${ctx}/css/dtree.css">

<script type="text/javascript" src="${ctx}/js/easyui/jquery-1.6.min.js"></script>

<script type="text/javascript" src="${ctx}/js/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="${ctx}/js/easyui/jquery.edatagrid.js"></script>

<link rel="stylesheet" href="${ctx}/css/easyui/demo.css" type="text/css">

<link rel="stylesheet" href="${ctx}/css/easyui/easyui.css" type="text/css">

<link rel="stylesheet" href="${ctx}/css/easyui/icon.css" type="text/css">

<script src="${ctx}/js/dtree.js" type="text/javascript"></script>

jsp

<html>

<head>

    <base href="${ctx}">

    <title>用户信息</title>

    <script type="text/javascript">

            var jsondata='{"total":1,"rows":[{"username":"001","password":"001"},{"username":"002","password":"002"},{"username":"002","password":"002"}]}';

            var data = $.parseJSON(jsondata); //json格式化

            $(document).ready(function(){

                $("#dg").datagrid({

                title: "用户信息列表",

                width: 700,

                height: 'auto',

                striped: true,

                rownumbers: true,

                singleSelect: true,

                nowrap: true,

                pagination: true,

                columns:[[

                {field:"username",title:"用户名",width:100},

                {field:"password",title:"密码",width:100}

                   ]]

            })

           $("#dg").datagrid('loadData', data);//加载数据，不加表格数据不会显示

    });

</script>

</head>

  <body>

    <table id="dg"></table>

  </body>

</html>

jsp+easyui+DataGrid 例子的更多相关文章

  1. EasyUI Datagrid的简单使用

    此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Da ...

  2. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  3. 动态设置easyui datagrid URL

    动态设置easyui datagrid URL$('#tt').datagrid({url:'website/jsp/servlet',        queryParams:{method:'xx' ...

  4. EasyUI datagrid简单运用

    jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的 ...

  5. easyui datagrid load 封装 参数问题 js 作用域

    var temp = { LoginAccount: $('#LoginAccount').val(), ShopName: $('#ShopName').val() }; function doSe ...

  6. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  7. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  8. 一步步实现 easyui datagrid表格宽度自适应，效果非常好

    一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性  fitColumns:true $(function(){ //初始加载,表格宽 ...

  9. DataTables VS EasyUI DataGrid 基础应用 转

    DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一 ...

随机推荐

  1. Binary Tree Maximum Path Sum leetcode java

    题目: Given a binary tree, find the maximum path sum. The path may start and end at any node in the tr ...

  2. 魅族推送 简介 集成 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. 利用proguard对java web工程代码混淆

    目标: 将代码混淆,也就是给第三方源代码,让他们只能运行,却看不懂代码. 用到的工具: 混淆jar的工具:proguard5.1 下载地址:http://download.csdn.net/detai ...

  4. 上机题目（0基础）- Java网络操作-打印网页（Java）

    打印一个网页,熟悉Java网络编程: import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...

  5. Andriod NDK assets的三个相关知识

    如何获取assetManager   engine->app->activity->assetManager     Asset文件应该放在哪个目录? 如何生成tga文件: 可以用这 ...

  6. Docker container常用命令

    列出所有的container. docker container ls 启动一个container. docker run –p <host端口>: <container端口> ...

  7. mybatis 是如何与数据表对应上的 ？

    MyBatis也需要进行表和实体 的关联.我们查询的是表,返回的结果是实体类.这之间有一个对应关系. 如果说实体类的属性和表的列名一一对应,名字一样,那就自动解决了这个问题.但是如果实体类的属性和表的 ...

  8. iPhone8发布后那些搞笑Geek段子合辑 #精选搞笑GEEK段子

    这些段子能把人笑出猪叫声哈哈哈哈哈哈哈哈哈哈哈哈嗝 前方高能!请带好安全帽观看段子手们的表演   只能帮你们到这里了 加了半截刘海,怎么像和天猫合作的了? 杜蕾斯的追热点也很及时啊!十年如一日是啥意思 ...

  9. URAL 1224. Spiral （规律）

    1224. Spiral Time limit: 1.0 second Memory limit: 64 MB A brand new sapper robot is able to neutrali ...

  10. Word批量调整插入图片大小

    做标书,word中需要插入大量图片,实为一些证书.文件的扫描文件.但插入后,大小不是想要的,太小了,打印出来看不清.需要调整,需要批量调整. 这是一个不错的方法: 选中第一张图片,按页面调整大小到适合 ...