Magic Grid ComboBox JQuery 版

在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 版

时间: 2024-10-05 11:34:46

Magic Grid ComboBox JQuery 版的相关文章

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

原文:jquery版小型婚礼(可动态添加祝福语) 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我的百度生涯,一直寻觅许愿墙背景图片和便利贴图片,觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片.最终我决定用jquery制作一个小型婚礼,并且实现添加祝福语的功能. 音乐响起来,开始我的婚礼进行曲~ 一.婚礼演示图 场景一: 场景二: 场景三: 场景四: 场景五: 场景六: 场景七: 添加祝福语: 二.html代码 <div class="

jQuery版感应鼠标显示隐藏的菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery版感应鼠标显示隐藏的菜单丨天津

Spring-2-A Magic Grid(SPOJ AMR11A)解题报告及测试数据

Magic Grid Time Limit:336MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Description Thanks a lot for helping Harry Potter in finding the Sorcerer's Stone of Immortality in October. Did we not tell you that it was just an online game ? uhhh!

jQuery版推箱子游戏详解和源码

前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这一关其实还是有点难度的,我做完之后想检测一下下一关正确么,居然还玩了以后才通关. 如果你看到这张图让你想起了你童年的回忆,说明你老了,这里可以试玩一下(很遗憾没有链接地址,最后又源码可以下载). css布局 主要考虑的是地图是怎么动态生成的,地图中有灰色的,还有墙,箱子,蓝色,红色背景,人物.先看c

jquery版时钟(css3实现)

做时钟的主要原因是因为喜欢,觉得它好看(本人对特效有点爱不释手……).做的时候感觉工程量会有点大,做着做着发现实现起来其实并不难,只要理清思绪,其实还蛮简单的(我制作东西喜欢整体方向制定好,然后边做边找感觉,最后可能会有不一样的惊喜). 我这里采用了时钟的背景图片,第一我觉得图片好看,第二我觉得应该先实现主要的功能再考虑画图(总归来说就是有点懒,哈哈~).好了,废话不多说啦,进入正题. 一.图片演示 二.html代码 <div class="box"> <div cl

jquery版网页倒计时动态效果

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>jquery版网页倒计时动态效果</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

jquery版相片墙(鼠标控制图片聚合和散开)

原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激动,哇!怎么可以这么牛!我制作出来的没那边炫,但是还是制作出来了,算是对我的一种激励!希望能有碰到问题就要解决它的精神,即使不是现在但会是不久的将来! 一.演示效果 散开状态: 聚合状态: 二.html代码 <div class="box&

social-share,社会化分享组件之jquery版

social-share,诚如其简洁所述"支持微信(二维码).微博.Github.Google++.LinkedIn.Twitter.Facebook.RSS-, 支持四种大小设置",够简洁,够漂亮.之前使用的"百度分享"组件,却发现可恶的植入了后台广告,页面刷新一次,广告就加载一次,让人生厌.今天有幸发现这款轻量级的social-share,真让人爱不释手,所以借此机会推广给更多需要的人. 原生的social-share(可通过harttle/social-sha

jquery版瀑布流

原文:jquery版瀑布流 一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 <div class="header">header</div> <div class="box clearfix"> <div class="waterFall"> <