zoukankan      html  css  js  c++  java
  • easyui toolbar 可以放在datagrid底下

    html:

     <div class="easyui-tabs" style="height: 250px;" tools="#t_rank">
                <div title="指标排名">
                    <table id="dg_rank">
                    </table>
                </div>
            </div>
    
    <div id="toolbar" class="datagrid-toolbar">
            <a class="easyui-linkbutton" plain="true" onclick="" title="充电总金额">1</a>
            <a class="easyui-linkbutton" plain="true" onclick="" title="按平均充电量">2</a>
            <a class="easyui-linkbutton" plain="true" onclick="" title="按运行故障率">3</a>
            <a class="easyui-linkbutton" plain="true" onclick="" title="按卡消费总额">4</a>
        </div>

    js:

    /**
    * *指标排名datagrid
    **/
    function rank() {
        $('#dg_rank').datagrid({
            url: '../../WebService/WarnRecService.ashx',
            queryParams: { action: 'findbytelesignallingwarn2', warnType: '', zhanBh: '', yunXinBh: '', kssj: '', jssj: '', clfs: '' },
            fit: true,
            singleSelect: true,
            border: false,
            striped: true,
            showFooter: true,
         toolbar:'#toolbal', buttons:
    '#toolbar', columns: [[ { field: 'Id', hidden: true }, { field: 'CodeName', title: '类型', align: 'center', 100 }, { field: 'OccurDt', title: '时间', align: 'center', 150 }, { field: 'ZhanJc', title: '场站名称', align: 'center', 150 }, { field: 'YunXing_Bh', title: '桩运行编号', align: 'center', 113 }, { field: 'LogDesc', title: '内容', align: 'center', 340 }, { field: 'ProcessFlag', title: '处理情况', 60, align: 'center', formatter: function (value, row, index) { var str = ""; switch (row.ProcessFlag) { case 0: str = "<a href='#' onclick='OffPolice_click("" + row.Id + "")' class='easyui-linkbutton' plain='true' title='' iconcls='icon-cancel'></a>"; break; case 1: case 2: str = "<a href='#' class='easyui-linkbutton' plain='true' title='' iconcls='icon-ok'></a>"; break; default: } return str; } }, { field: 'content', title: '处理方式', align: 'center', 100, formatter: function (value, row, index) { var str = row.ProcessFlag; switch (str) { case 0: str = "未处理"; break; case 1: str = "自动灭警"; break; case 2: str = "手动灭警"; break; default: } return str; } } ]], onLoadSuccess: function () { $($('#dg_rank').datagrid("getPanel")).find('a.easyui-linkbutton').linkbutton(); insertHtmlInDom(); } }); } /** * *在id为da_rank的父节点外面添加id为toolbar的div **/ function insertHtmlInDom() {  $('#dg_rank').parent().after($('.datagrid-toolbar')); }

    显示:

  • 相关阅读:
    Redis 之 数据持久化、主从复制、哨兵、集群
    Linux 之 MySQL(mariadb) 主从复制
    python 面试题
    Linux 之 nginx相关
    Linux 之redis 的安装及使用
    Linux 之 安装虚拟环境virtualenvwrapper
    Vue使用Element-ui走马灯功能动态改变图片和容器大小
    文本信息抽取的方法
    python3 将文本用utf-8编码方式写入txt文件
    一个比celery更简单的python异步模块rq
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/3328438.html
Copyright © 2011-2022 走看看