首页 > Web开发 > 详细

Magic Grid ComboBox JQuery 版

时间:2014-07-29 20:45:12      阅读:439      评论:0      收藏:0      [点我收藏+]

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

1、

bubuko.com,布布扣
?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 版,布布扣,bubuko.com

Magic Grid ComboBox JQuery 版

原文:http://www.cnblogs.com/xkzy/p/3875885.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!