您的位置：首页 > 产品设计 > UI/UE

easyui-datagrid_toolbar组件详细用法。

2014-11-06 09:50 525 查看
<%@ 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" onclick="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" onclick="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;

 }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航