jsp+easyui+DataGrid 例子
转自: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 例子的更多相关文章
- EasyUI Datagrid的简单使用
此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Da ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- 动态设置easyui datagrid URL
动态设置easyui datagrid URL$('#tt').datagrid({url:'website/jsp/servlet', queryParams:{method:'xx' ...
- EasyUI datagrid简单运用
jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的 ...
- easyui datagrid load 封装 参数问题 js 作用域
var temp = { LoginAccount: $('#LoginAccount').val(), ShopName: $('#ShopName').val() }; function doSe ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性 fitColumns:true $(function(){ //初始加载,表格宽 ...
- DataTables VS EasyUI DataGrid 基础应用 转
DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一 ...
随机推荐
- Pytorch多GPU并行处理
可以参数2017coco detection 旷视冠军MegDet: MegDet 与 Synchronized BatchNorm PyTorch-Encoding官方文档对CGBN(cross g ...
- sql server 由于登入失败而无法启动服务
到控制面板——管理工具——服务,找到mssqlserver这个服务,在属性里把登陆帐户改成你目前登录windows的帐户或选择本地系统账户再重新启动服务就好了
- C++ 学习路线和看法
C++ 学习路线和看法 原文地址:http://shundacao.blog.163.com/blog/static/1340404812010101982751101/ C++大体分为C++ ...
- C++类中的访问权限问题
纠结的东西: private,public,protected方法的访问范围.(public继承下)private: 只能由该类中的函数.其友元函数访问,不能被任何其他访问,该类的对象也不能访问. p ...
- IntelIj IDEA运行JUnit Test OutOfMemoryError
好久没看到OutOfMemoryError这种错误了,今天跑测试的时候发现总是报错.针对IDEA需要修改几个配置. JUnit Test在运行前,IDEA会build整个项目,这个是喜欢eclipse ...
- DaoCloud加速docker镜像下载
1. 注册DaoCloud用户; 2. 注册完成后,会进入dashboard页面,点击右上方的加速器.该页面提供了Linux.Windows和Mac的加速方案,我这里选择的是Linux: 3. 执行其 ...
- ASP入门(十一)-Session小案例
一般来说,在实际开发中,对于 Session 对象使用最多的就是用户登录部分了,这个案例将简单模拟一个用户登录表单.用户是否登录的判断以及用户退出的一系列功能,它一共分了以下几个页面. Login.a ...
- linux设置开机同步时间
在/etc/init.d/下新建zhjdate脚本,添加如下内容: #!/bin/bash# chkconfig: 345 63 37#chkconfig:345 63 37 (数字345是指在运行级 ...
- C#.NET常见问题(FAQ)-如何让Listbox支持多选
把SelectionMode改成MultiExtended 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线 ...
- 【树莓派】树莓派刷Android系统
树莓派3安装Android TV系统图文教程 http://www.mz6.net/news/android/6866.html 树莓派3 Android TV系统怎样安装?树莓派3一个重要用途就是当 ...