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 URL
动态设置easyui datagrid URL $('#tt').datagrid({url:'website/jsp/servlet', queryParams:{method:'x ...
EasyUI Datagrid 鼠标悬停显示单元格内容复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容第一种方式: 1.js 定义函数<script type="text/javascript"> //格式化单元格 ...
easyUI -datagrid表格数据不显示
出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的,可能是因情况而异吧,现在说一下日常做项目中我遇到过的这几个方面(原因二是我遇到过的,在网上看到也是常有的) 前提: 在 ...
使用easyUI datagrid分页
使用easyUI datagrid分页我用了比较简单的sturts2和mybatis结合的小测试demo实现的. 一.使用easyUI datagrid分页注意事项及原理: 1.EasyUI的Dat ...
EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
jQuery EasyUI DataGrid - 格式化列（formatter ）
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
给 Easyui Datagrid 扩展方法
给 Easyui Datagrid 扩展方法 $.extend($.fn.datagrid.methods, {/*** 更新非编辑列值* @param rowIndex : 行索引* @param ...
EasyUI DataGrid 合并单元格
EasyUI DataGrid 合并单元格 1 function mergeCells(){ 2 var arr =[{mergeFiled:"field",premiseFile ...

jsp+easyui+DataGrid 例子

jsp+easyui+DataGrid 例子相关推荐

最新文章

热门文章