在MagicCombo组件中嵌入Grid,以支持分页查找和跨页选取 

1、


​2. [代码][JavaScript]单选示例代码     
<script type="text/javascript" src="/js/mac/pager.js"></script>
<script type="text/javascript" src="/js/mac/grid.js"></script>
<script type="text/javascript">
$(function(){
    var gd1 = $('<div class="grid"></div>').mac('grid', {
        key: 'no',
        cols : [{
            field: 'subject', title : 'Subject', width: 150
        },{
            field: 'summary', title : 'Summary', width: 150
        },{
            field: 'debit', title : 'Debbit', width: 80, sort: true,
            render: function(r, tr){
                return '<div class="money">$'+r.debit+'</div>';
            }http://www.huiyi8.com/jianbihua/​
        },{
            field: 'credit', title : 'Credit', width: 80, sort: true,
            render: function(r, tr){
                return '<div class="money">$'+r.credit+'</div>';
            }简笔画大全
        }],
        loader: {
            url: '/javascript/grid/data.php',
            params: { pageNo: 1, pageSize: 20 },
            autoLoad: true
        },
        pagerLength: 10,
        onRowClick: function(){
            var ec = $(this);
            gd1.find('.tr').removeClass('selected');
            ec.addClass('selected');
            var k = ec.attr('name');
            gd1.selected = {};
            gd1.selected[k] = gd1.data[k];
            cb1.select(gd1.data[k]);
            cb1.close();
        },
        afterLoad: function(dd, po){
            gd1.select(cb1.selected);
        }
    });
    gd1.select = function(sl){
        var at = gd1.find('.tr').removeClass('selected');
        $.each(sl, function(n, r){
            at.filter("[name='" + r.no + "']").addClass('selected');
        });
    }
    var cb1 = $('#combo1').mac('combo', {
        keyField: 'no',
        displayField: 'subject',
        boxWidth: 490,
        boxHeight: 300,
        width: 200,
        boxEl: gd1,
        multiSelect: false,
        onOpen: function(){
            gd1.adjust(cb1);
            gd1.select(cb1.selected);
        }
    });
    $('#get1').click(function(){
        mac.alert(JSON.stringify(cb1.selected[0]));
    });
    $('#set1').click(function(){
        cb1.select({ no: 2, subject: 'Subject 002' });
    });
    $('button').button();
});
</script>
<div id="combo1" class="combo customCombo"></div><br>
&nbsp;&nbsp;<button id="get1">get1</button>&nbsp;<button id="set1">set1</button>

Magic Grid ComboBox JQuery 版的更多相关文章

  1. 全自动数据表格JQuery版

    由于最近工作上有些变动,已经快一个月没有写博客了.上一篇博客[React]全自动数据表格组件——BodeGrid介绍了全自动数据表格的设计思路以及分享了一个react.js的实现.但是现实情况中为了节 ...

  2. [转载]jquery版小型婚礼(可动态添加祝福语)

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  3. jquery版小型婚礼(可动态添加祝福语)

    前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我的百度生涯,一直寻觅许愿墙背景图片和便利贴图片,觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片.最 ...

  4. Dynamics CRM 2011编程系列(60):JS编程之CRUD辅助类(JQuery版)

    今天给大家分享一个JQuery版的REST辅助类,在一年前我分享过一个只能在IE环境下运行的REST辅助类:<JS编程之实体CRUD辅助类 >.为什么要推出JQuery版的CRUD辅助类呢 ...

  5. 5JS树形结构菜单和jQuery版

    第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. 编写Javascript类库(jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  7. jquery版 发同步请求 自定义头部信息 公共请求体

    //jquery版 发同步请求 function getData(url,param,fn){ var Authorization=localStorage.getItem("Authori ...

  8. AMR11A - Magic Grid

    Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. Did ...

  9. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 异常 Failed to bind NettyServer on /10.133.7.216:29105, cause: Failed to bind to: /0.0.0.0:29105

    "C:\Program Files\Java\jdk1.7.0_80\bin\java" -agentlib:jdwp=transport=dt_socket,address=12 ...

  2. 查看java进程中哪个线程在消耗系统资源

    1 top -p $pid -H  加上-H这个参数后,会列出有哪些线程.这样就可以看到哪个线程id最消耗系统资源了.看到的线程id是10进制的数字. 2 jstack $pid 可以打印出制定jav ...

  3. 【dp】HDU 1421 搬寝室

    http://acm.hdu.edu.cn/showproblem.php?pid=1421 [题意] 给定n个数,要从n个数中选择k个二元组{x,y},最小化sum{(x-y)^2} 2<=2 ...

  4. java遍历文件夹及所有子文件

    以前写代码循环文件夹和子文件时,总是自己写递归访问,今天研究lucene时,发现JDK给我们已经提供了访问遍历的方法,上代码: String str = "C:\\Users\\LLY\\D ...

  5. zoj4028 LIS

    差分约束瞎搞一下,话说这个数据不知道怎么回事,我的图按道理而言最多只有4n条边,开5n还不够??必须6n?? 约束条件首先根据f函数可建立两点之间的约束,不妨设d[i]为i到0的距离,则对于f[i] ...

  6. [Bzoj1022][SHOI2008]小约翰的游戏John(博弈论)

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2976  Solved: 1894[Submit] ...

  7. codeforces 875F(基环外向树)

    题意 有一个左边m个点,右边n个点的二分图(n,m<=1e5),左边每个点向右边恰好连两条权值相同的边. 求这个二分图的最优匹配 分析 对于这种二选一问题,即左边的a连向右边的b和c,权值为d, ...

  8. Wannafly挑战赛1

    地址:https://www.nowcoder.com/acm/contest/15#question A(树形dp) 分析 dp[i][0],dp[i][1]分别表示以i为根的子树中,有多少个点到i ...

  9. Eclipse-Java代码规范和质量检查插件-Checkstyle

    CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代码规范检查过程,从而使得开发人员从这项重要但枯燥的任务中解脱出来.它可以根 ...

  10. css实现文字渐变

    css文件渐变虽然兼容性比较差,但是用在移动端和chrome中还是没有问题的. 实现文件渐变的方法有两种 1. 使用 background 的属性 2. 使用 mask 属性 方式一. <!DO ...