Easyui Datagrid使用小例

最新推荐文章于 2021-02-15 19:04:32 发布

火雨_Nick

最新推荐文章于 2021-02-15 19:04:32 发布

阅读量2.3k

点赞数

分类专栏： Java 前端开发各种Js插件使用方法整理文章标签： easyui datagrid Spring

本文链接：https://blog.csdn.net/wp1603710463/article/details/49233027

版权

本文提供了一个使用Easyui Datagrid和Spring进行分页查询的技术参数列表展示案例。通过Controller、Service和页面代码的示例，展示了如何获取请求参数、进行数据库操作并返回JSON数据到前端页面进行显示。

摘要由CSDN通过智能技术生成

Easyui Datagrid使用小例

写一个

Easyui Datagrid的使用小例子供大家参考：

废话不多说，直接贴代码：

1. 页面部分代码：techInfoList.jsp

<div style="text-align: left;">
<%@ page language="java" contentType="text/html; charset=UTF-8"</span></div><span style="font-family:Times New Roman;font-size:14px;">	pageEncoding="UTF-8"%>
</span><div style="text-align: left;">//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www</div><!DOCTYPE html PUBLIC "
-.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>techInfo</title>
<div style="text-align: left;">s/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/them</div>	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/them
ees/icon.css">
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.4.3/demo/demo.css">
<div style="text-align: left;">text/javascript" src="static/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <st</div>	<script type="text/javascript" src="static/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type=
"yle>
    .datagrid-header-row {background-color:#005aaa; color:white}
    </style>
</head>

<%-- <input id="specNo" type="hidden" value="${specialNo}" /> --%>
<script type="text/javascript">
<div style="text-align: left;">#techInfo").datagrid({  
                loadMsg:'数据加载中....',  
     </div>    //var specNo = document.getElementById("specNo").value;   //模块专用号
    var techInfoDatagrid;
    var rowEditor=undefined;
    $(document).ready(function() {  
          techInfoDatagrid=$(
"           title:'技术参数信息一览表',     //标题
                iconCls:'icon-edit',         //图标 
                width:880,                   
                height:680,                  //高度 
                //从远程站点请求数据的网址  
<div style="text-align: left;">  collapsible:true,      //是否可折叠的 
                fitColumns</div>                url:'techInfoList.do?specialNo=${specialNo}',
                nowrap: false,         //在一行中显示数据,设置为真能提高加载性能
                striped: true,         //奇偶行颜色不同  
                border: true,  
             
 : true,      //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例
                //fit: true,             //自动大小 
                idField:'id',       //主键字段 
                //sortName: 'id',     //定义该列可以排序
                //sortOrder: 'desc',     //定义的列的排序顺序，只能“升序”或“降序”
<div style="text-align: left;">/行号 
                //列属性，这些列将被冻结在左边
                </div>                remoteSort: false,     //定义是否从服务器上排序数据
                queryParams:{},        //查询条件    
                singleSelect:false,     //是否单选  false(非单选)   
                pagination:true,       //分页控件
                rownumbers:true,       
/frozenColumns:[[   
                    {field:'ck',checkbox:true},  
                    {title:'ID',field:'id',width:80,sortable:true,
                      editor : {   //是否可编辑  
                            type : 'validatebox',  
                            options : {  //必须校验  
<div style="text-align: left;">:'操作',width:100,align:'center',colspan:2}  
     </div>                                required : true  
                            }  
                        }  
                    }
                ]], 
                //每个列具体内容   
                columns:[[  
                    {title:'基本信息',colspan:7},  
                    {titl
e           ],[  
                    {field:'label',title:'标注',width:100,align:'center',
                            editor : {    //是否可编辑  
                               type : 'validatebox',  
                               options : {  
                                  required : true   //必须校验  
<div style="text-align: left;">ptions : {  
                     </div>                               }  
                            }  
                    },  
                    {field:'value',title:'属性值',width:100,align:'center',
                            editor : {   //是否可编辑  
                               type : 'validatebox',  
                               
o             required : false  
                               }  
                            }  
                    },  
                    {field:'unit',title:'单位',width:100,align:'center',
                            editor : {   //是否可编辑  
                               type : 'validatebox',  
<div style="text-align: left;">: {   //是否可编辑