本文介绍在datagrid上同时添加搜索和操作区域。

仅仅是增加操作区域

□ 方法1

$('#dg').datagrid({ 
    toolbar: '#tb' 
}); 
<div id="tb"> 
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> 
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> 
</div>

□ 方法2

$('#dg').datagrid({ 
    toolbar: [{ 
        iconCls: 'icon-edit', 
        handler: function(){alert('edit')} 
    },'-',{ 
        iconCls: 'icon-help', 
        handler: function(){alert('help')} 
    }] 
});

仅仅增加搜索区域

$('#dg').datagrid({ 
    toolbar: '#tb' 
});
 
    <!--搜索开始--> 
    <div id="tb" style="padding:3px"> 
        <span>主键:</span> 
        <input id="itemid" style="line-height:22px;border:1px solid #ccc"> 
        <span>产品编号:</span> 
        <input id="productid" style="line-height:22px;border:1px solid #ccc"> 
        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 
    </div> 
    <!--搜索结束-->

同时增加搜索和操作区域

$('#dg').datagrid({ 
    toolbar: '#tb,#tb1', 
});   
 
    <!--搜索开始--> 
    <div id="tb" style="padding:3px"> 
        <span>主键:</span> 
        <input id="itemid" style="line-height:22px;border:1px solid #ccc"> 
        <span>产品编号:</span> 
        <input id="productid" style="line-height:22px;border:1px solid #ccc"> 
        <a href="#" class="easyui-linkbutton" plain="false" id="btnQuery">搜索</a> 
    </div> 
    <!--搜索结束-->
 
    <!--操作按钮开始--> 
    <div id="tb1"> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">添加</a> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">剪切</a> 
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">保存</a> 
    </div> 
    <!--操作按钮结束-->    
 

datagrid在MVC中的运用04-同时添加搜索和操作区域的更多相关文章

  1. datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框

    本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...

  2. datagrid在MVC中的运用01-基本属性并实现分页

    本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...

  3. Android中通过ActionBar为标题栏添加搜索以及分享视窗

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...

  4. datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)

    本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...

  5. jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  6. datagrid在MVC中的运用10-勾选

    本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...

  7. datagrid在MVC中的运用09-实现排序

    本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...

  8. datagrid在MVC中的运用06-固定连续列

    本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...

  9. datagrid在MVC中的运用02-结合搜索

    本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...

随机推荐

  1. 关于move

    procedure TForm4.Button1Click(Sender: TObject); var //动态数组 bytes1,bytes2: TBytes; //静态数组 bytes3,byte ...

  2. Centos7.3安装和配置jre1.8

    在正式环境里 我们可以不安装jdk ,仅仅安装Java运行环境 jre即可: 第一步:下载jre 我们去oracle官方下载下jre http://www.oracle.com/technetwork ...

  3. Robots.txt 不让搜索引擎收录网站的方法

    有没有担心过自己的隐私会在强大的搜索引擎面前无所遁形?想象一下,如果要向世界上所有的人公开你的私人日记,你能接受吗?的确是很矛盾的问题,站长们大都忧虑“如何让搜索引擎收录的我的网站?”,而我们还是要研 ...

  4. GridView监听器

    package com.example.wang.testapp2; import android.os.Bundle; import android.support.v7.app.AppCompat ...

  5. 转:40个Java集合面试问题和答案

    转自牛客网:http://mp.weixin.qq.com/s?__biz=MjM5NDYxMzk1Nw==&mid=215319390&idx=1&sn=1ab621bc40 ...

  6. Cordova 打包签名

    1.第一步 在项目根目录下运行命令cordova build --release android,会在testApp\platforms\android\build\outputs\apk目录下生成一 ...

  7. 数据挖掘算法:关联分析二(Apriori)

    二.Apriori算法 上文说到,大多数关联规则挖掘算法通常采用的策略是分解为两步: 频繁项集产生,其目标是发现满足具有最小支持度阈值的所有项集,称为频繁项集(frequent itemset). 规 ...

  8. react篇章-React State(状态)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. C# 中使用 Task 实现提前加载

    介绍一种/两种可以提前做点什么事情的方法. 场景 在UI线程中执行耗时操作,如读取大文件,为了不造成UI卡顿,常采用异步加载的方式,即 async/await . 通常的写法是这样的: private ...

  10. mysql 错误解决:Plugin 'FEDERATED' is disabled. /usr/sbin/mysqld: Table 'mysql.plugin' doesn't exist

    今天安装完Mysql后,开启发生了错误: 1.打开相应文件夹,查看错误信息: 2.打开错误信息文件,查看错误原因是:Plugin 'FEDERATED' is disabled. /usr/sbin/ ...