easyui-datagrid_toolbar组件详细用法。

最新推荐文章于 2023-04-26 08:39:32 发布
最新推荐文章于 2023-04-26 08:39:32 发布
阅读量3k 收藏
点赞数
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014369382/article/details/40856155
版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri=            此处标签联网地址         prefix="c"%>
<%@ taglib uri=             此处标签联网地址        prefix="fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="${ctx}/common/plugin/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="${ctx}/common/plugin/easyui/themes/icon.css">
 <script type="text/javascript" src="${ctx}/common/plugin/easyui/jquery.min.js"></script>
 <script type="text/javascript" src="${ctx}/common/plugin/easyui/jquery.easyui.min.js"></script>
</head>
<body>
 
 <table id="mainGrid" class="easyui-datagrid" title="页面" style="width:100%;height:350px"
   data-options="rownumbers:true,singleSelect:true,collapsible:true,pagination:true,url:'${ctx}/page/chartListJson.do',method:'post',toolbar:'#tb'">
  <thead>
   <tr>
    <th data-options="field:'ID',width:80,hidden:false">ID</th>
    <th data-options="field:'CHART_TYPE',width:80">类型</th>
    <th data-options="field:'DATA_XML',width:200,align:'left'">XML</th>
    <th data-options="field:'CHART_URL',width:80,align:'left'">URL</th>
    <th data-options="field:'CHART_NAME',width:200">名称</th>
    <th data-options="field:'DATA_SQL',width:200,align:'center'">SQL</th>
    <th data-options="field:'CHART_CODE',width:60,align:'center'">编码</th>
    <th data-options="field:'W',width:60,align:'center'">宽</th>
    <th data-options="field:'H',width:60,align:'center'">高</th>
    <th data-options="field:'L',width:60,align:'center'">左</th>
    <th data-options="field:'R',width:60,align:'center'">右</th>
   </tr>
  </thead>
 </table>
 
 <div id="tb" style="padding:5px;height:auto">
  <div style="margin-bottom:5px">
   <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="doEdit()" ></a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
  </div>
  <div>
   从: <input class="easyui-datebox" style="width:80px">
   到: <input class="easyui-datebox" style="width:80px">
   类型:
   <select class="easyui-combobox" id="Q_CHART_TYPE" panelHeight="auto" style="width:100px">
    <option value="">全部</option>
    <option value="BT">饼图</option>
    <option value="DJ">堆积图</option>
    <option value="HH">混合</option>
    <option value="HH2">混合2</option>
    <option value="KDX">刻度线</option>
    <option value="QT">圈图</option>
    <option value="YBP">仪表盘</option>
    <option value="ZT">柱图</option>
    <option value="ZX">折线图</option>
   </select>
   名称：
   <input class="easyui-textbox" type="text" id="Q_CHART_NAME" />
   编码：
   <input class="easyui-textbox" type="text" id="Q_CHART_CODE" />
   <a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="doSearch()">查询</a>
  </div>
 </div>
 
 <script>
  function doSearch(){
   var Q_CHART_TYPE = $('#Q_CHART_TYPE').combobox('getValue');
   var Q_CHART_NAME = $('#Q_CHART_NAME').textbox('getValue');
   var Q_CHART_CODE = $('#Q_CHART_CODE').textbox('getValue');
   $('#mainGrid').datagrid('reload',{CHART_TYPE:Q_CHART_TYPE,CHART_NAME:Q_CHART_NAME,CHART_CODE:Q_CHART_CODE});
  }
  function doEdit(){
   var row = $("#mainGrid").datagrid("getSelected");
   window.open("${ctx}/apps/default/chart/editChart.jsp?chartId="+row.ID);
  }
 </script>

</body>
</html>

 

 

 

 @RequestMapping("chartListJson")
 @ResponseBody
 public String chartListJson(HttpServletRequest request,String CHART_TYPE,String CHART_NAME,String CHART_CODE){
  Map param = new HashMap();
  param.put("page", request.getParameter("page"));
  param.put("rows", request.getParameter("rows"));
  param.put("CHART_TYPE", CHART_TYPE);
  param.put("CHART_NAME", CHART_NAME);
  param.put("CHART_CODE", CHART_CODE);
  String json = biz.chartListJson(param);
  return json;
 }

最爱陌生人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyUI_04（DataGrid数据查询）
weixin_65479202的博客
05-07 833
easyUI后台管理实现数据显示和模糊查询，看了代码就能进行操作和运行！！！简单易学！！！
使用easyUI 添加toolbar到datagrid
java开发指南博客 【转载】
08-10 263
@author YHC 这个示例向你展示如何添加toolbar到datagrid. 查看 Demo 创建 DataGrid &lt;table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="data/datagrid_data.json" tit...
EasyUI datagrid toolbar常用的两种形式
热门推荐
navy专栏
05-01 2万+
第一种   $(function(){ $('#userInfo').datagrid({        url:'../json/customerAction_getCustomerInfo',     fitColumns:true,     striped:true,     nowrap:true,     loadMsg:'数据正在加载，请稍后...',
easyui datagrid 行右键 动态获取并生成toolbar 按钮
dingqi1722的博客
03-25 130
1 var createGridRowContextMenu = function(e, rowIndex, rowData) { 2 e.preventDefault(); 3 var grid = $(this);/* grid本身 */ 4 var rowContextMenu = this.rowContextMenu;/* gr...
easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现
weixin_30274627的博客
03-28 767
easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).hide(); //显示第一个按钮 $('div.datagrid-toolbar a').eq(0).s...
easyui-datagrid开发实践(总结)
08-29
接下来，文章详细介绍了EasyUI Datagrid的基本使用方法。Datagrid的数据加载通常通过POST请求，指定URL来从后端获取数据。以下是一个示例代码片段： ```javascript $('#List').datagrid({ title: "交易公司", ...
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
10-22
在jQuery EasyUI中，Datagrid组件是一个核心组件，用于展示和管理表格数据，常用于数据展示、编辑和操作。本文将深入解析jQuery EasyUI Datagrid数据表格组件的结构。 首先，Datagrid组件的基础DOM结构至关重要，它...
easyui datagrid 增加鼠标悬停弹窗事件
08-21
在本示例中，我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能：当鼠标悬停在某一行时，弹出一个窗口显示该行的关键信息，例如用于图片预览。以下是对这个知识点的详细解释： 1. **EasyUI Datagrid**： ...
EasyUI DataGrid过滤用法实例
02-22
在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能，帮助用户更高效地查找和管理表格中的信息。 首先，`datagrid-filter.js` 文件很可能包含了实现过滤...
EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi
04-20
EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频，现在很难找了，讲得很详细，授人以鱼，不如授人以渔。 第01课(大概介绍一下easyui，和组织...
EasyUI DataGrid 添加工具
05-14
这个例子显示了如何添加工具栏 DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮： • text: 在按钮上显示的文本 • iconCls: 定义背景图标显示在按钮的左面的CSS类。 • handler: 当用户按下按钮时，处理一些事情的函数
Easyui datagrid toolbar 模板
weixin_34253126的博客
07-01 141
<div id="DataGridEmployeeToolBar" border="false" style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;"> <div style="float: left;"&gt...
easyui datagrid 添加toolbar
kanpiaoxue的专栏
11-13 430
[ { text: '增加', iconCls: 'icon-add', handler: function () {  } }, { text: '修改', iconCls: 'icon-edit', handler: function () { } }, { text: '删除', iconCls: 'icon-remove', handler: function () { } }, ...
jQuery EasyUI 数据网格 - 添加工具栏
unber的博客
04-26 232
我们不需要写任何的 javascript 代码，只需通过 'toolbar' 属性附加工具栏（toolbar）到数据网格（datagrid）。本实例演示如何添加工具栏（toolbar）到数据网格（datagrid）。创建数据网格（DataGrid）
easyui datagrid 创建带Toolbar的表格（1）
yb305
01-12 3013
<meta name="description" content="easyui help you build your web page easily!"> 创建带复选框的datagrid <link rel="stylesheet" type="text/css" href="./javascript/jquery-easyui-1.5.1/themes/default/easyui.cs
easyui Datagrid 加入 add， cut， save工具栏
学习专栏
11-25 5332
var toolbar = [{         text: 'Add',         iconCls: 'icon-add',         handler: function () { alert('add') }     }, {         text: 'Cut',         iconCls: 'icon-cut',         handler: func
动态静态网页EasyUI DataGrid 动态新增 Toolbar
love android
05-19 2890
PS:今天上午，非常郁闷，有很多简单基础的问题搞得我有些迷茫，哎，代码几天不写就忘。目前又不当COO，还是得用心记代码哦！     easyui datagrid 是一个弹性蛮大的元件，但是官方文件有点不足，是比拟惋惜的一点。上面，一条小龙会介绍一下，如何动态新增 toolbar button。这个技巧读者可以融会贯通应用在任何想动态新增的部分上。这边尽量简化好来介绍其中的关键点。     一
EasyUI(DataGrid数据新增)
weixin_56996467的博客
04-12 271
目录 一、项目结构 二、前台页面搭建 三、后台开发： 四、运行效果： ​ 一、项目结构 二、前台页面搭建 editBook.jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <form id="bookForm"> <input type="hidden" nam.
EasyUI系列之扩展easyui datagrid的两个方法.动态添加和删除toolbar的项
a18826265589的博客
11-28 223
1 $.extend($.fn.datagrid.methods, { 2 addToolbarItem: function(jq, items){ 3 return jq.each(function(){ 4 var toolbar = $(this).parent().prev("div.datag...
easyui-datagrid 放大镜模糊查询
最新发布
11-07
easyui-datagrid是一款基于jQuery的表格插件，它提供了丰富的功能和灵活的配置选项。放大镜模糊查询是easyui-datagrid的一种查询方式，它可以在datagrid的工具栏中添加一个放大镜图标，用户可以在输入框中输入关键字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值