1

我需要第一个 flexigrid 进行 ajax 调用并加载其数据，完成后，第二个 flexigrid 将在轮到它时进行下一个 ajax 调用。我怎样才能做到这一点？

//FILL THE OFFERS GRID
            jQuery("#OFFERS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getOffers&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'startdate', name : 'startdate', width : 180, sortable : true, align: 'center'},
                    {display: 'enddate', name : 'enddate', width : 180, sortable : true, align: 'left'},
                    {display: 'product_name', name : 'product_name', width : 120, sortable : true, align: 'left'},
                    {display: 'discount_amount €', name : 'discount_amount', width : 100, sortable : true, align: 'left'},
                    {display: 'discount_percent %', name : 'discount_percent', width : 120, sortable : true, align: 'right'}
                    ],
                searchitems : [
                    {display: 'startdate', name : 'startdate', isdefault: true},
                    {display: 'enddate', name : 'enddate'},
                    {display: 'product_name', name : 'product_name'},
                    {display: 'discount_amount', name : 'discount_amount'},
                    {display: 'discount_percent', name : 'discount_percent'}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Offer',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,      
                height: 200,
                buttons: [
                            {name: 'Test', onpress: test}
                    ]
            });


            //FILL THE PRODUCTS GRID

            jQuery("#pnlProducts").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'name', name : 'name', width : 180, sortable : true, align: 'center'},
                    {display: 'price', name : 'price', width : 180, sortable : true, align: 'left'}                 
                    ],
                searchitems : [
                    {display: 'id', name : 'id', isdefault: true},
                    {display: 'name', name : 'name'},
                    {display: 'price', name : 'price'}                  
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Products',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,
                height: 200,
                buttons: [{name: 'Test2', onpress: test}]
            });
4

2 回答 2

1

最后我找到了我的答案，为了确保我的页面中的许多 flexigrids 正常工作而不会发出许多异步请求并导致浏览器混合数据，我可以设置它的属性 onSuccess 并在那里传递一个函数。

//FILL THE OFFERS GRID
            jQuery("#tblOFFERS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getOffers&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'startdate', name : 'startdate', width : 180, sortable : true, align: 'center'},
                    {display: 'enddate', name : 'enddate', width : 180, sortable : true, align: 'left'},
                    {display: 'product_name', name : 'product_name', width : 120, sortable : true, align: 'left'},
                    {display: 'discount_amount €', name : 'discount_amount', width : 100, sortable : true, align: 'left'},
                    {display: 'discount_percent %', name : 'discount_percent', width : 120, sortable : true, align: 'right'}
                    ],
                searchitems : [
                    {display: 'startdate', name : 'startdate', isdefault: true},
                    {display: 'enddate', name : 'enddate'},
                    {display: 'product_name', name : 'product_name'},
                    {display: 'discount_amount', name : 'discount_amount'},
                    {display: 'discount_percent', name : 'discount_percent'}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Offer',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,      
                height: 200,
                onSuccess : fillTheNextGrid 
                buttons: [
                            {name: 'Test', onpress: test}
                    ]
            });


            //FILL THE PRODUCTS GRID
function fillTheNextGrid(
            jQuery("#tblPRODUCTS").flexigrid({
                url: 'index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&format=raw',
                dataType: 'json',
                singleSelect:true,          
                colModel : [
                    {display: 'id', name : 'id', width : 100, sortable : true, align: 'center'},
                    {display: 'name', name : 'name', width : 180, sortable : true, align: 'center'},
                    {display: 'price', name : 'price', width : 180, sortable : true, align: 'left'}                 
                    ],
                searchitems : [
                    {display: 'id', name : 'id', isdefault: true},
                    {display: 'name', name : 'name'},
                    {display: 'price', name : 'price'}                  
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'Products',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 900,
                onSubmit: addFormData,
                height: 200,
                buttons: [{name: 'Test2', onpress: test}]
            });
)

来源http://code.google.com/p/flexigrid/wiki/FAQ

于 2012-08-31T23:53:57.883 回答
0

当我在玩这个控件时，我设法做到了这一点，以便稍后添加查询，同时保持排序、搜索和分页使用相同的代码。

jQuery(document).ready(function () {
    //AUTO FILL THE OFFERS GRID
    jQuery("#OFFERS").flexigrid({
        url: 'index.php?option=com_virtuemart&view=offers&task=getOffers&page=1&format=raw',
        dataType: 'json',
        singleSelect: true,
        colModel: [{
            display: 'id',
            name: 'id',
            width: 100,
            sortable: true,
            align: 'center'
        }, {
            display: 'startdate',
            name: 'startdate',
            width: 180,
            sortable: true,
            align: 'center'
        }, {
            display: 'enddate',
            name: 'enddate',
            width: 180,
            sortable: true,
            align: 'left'
        }, {
            display: 'product_name',
            name: 'product_name',
            width: 120,
            sortable: true,
            align: 'left'
        }, {
            display: 'discount_amount €',
            name: 'discount_amount',
            width: 100,
            sortable: true,
            align: 'left'
        }, {
            display: 'discount_percent %',
            name: 'discount_percent',
            width: 120,
            sortable: true,
            align: 'right'
        }],
        searchitems: [{
            display: 'startdate',
            name: 'startdate',
            isdefault: true
        }, {
            display: 'enddate',
            name: 'enddate'
        }, {
            display: 'product_name',
            name: 'product_name'
        }, {
            display: 'discount_amount',
            name: 'discount_amount'
        }, {
            display: 'discount_percent',
            name: 'discount_percent'
        }],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: 'Offer',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 900,
        onSubmit: addFormData,
        height: 200,
        buttons: [{
            name: 'Testfunc1',
            onpress: testfunc1
        }]
    });


    //JUST CREATE THE PRODUCTS GRID 

    jQuery("#pnlProducts").flexigrid({
        dataType: 'json',
        singleSelect: true,
        colModel: [{
            display: 'id',
            name: 'id',
            width: 100,
            sortable: true,
            align: 'center'
        }, {
            display: 'name',
            name: 'name',
            width: 180,
            sortable: true,
            align: 'center'
        }, {
            display: 'price',
            name: 'price',
            width: 180,
            sortable: true,
            align: 'left'
        }],
        searchitems: [{
            display: 'id',
            name: 'id',
            isdefault: true
        }, {
            display: 'name',
            name: 'name'
        }, {
            display: 'price',
            name: 'price'
        }],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: 'Products',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 900,
        onSubmit: addFormData,
        height: 200,
        buttons: [{
            name: 'Testfunc2',
            onpress: testfunc2
        }]
    });       


    jQuery("#LoadProducts").click(function () {
        //MANUALLY FILL THE PRODUCT GRID START
        //But Search,Sort,Paging wont work
        /*jQuery.ajax({
                      type: "POST",
                      url: "index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&rp=18&sortname=name&sortorder=asc&query=&qtype=name&format=raw",
                      dataType: 'json',
                      cache: false                
                    }).done(function(data) {        
                        //alert(data);          
                        jQuery("#tblProducts").flexAddData(data);

                });*/

        //And this will keep the sort,search,paging working
        jQuery('#tblProducts').flexOptions({
            url: 'index.php?option=com_virtuemart&view=offers&task=getProducts&page=1&rp=18&sortname=name&sortorder=asc&query=&qtype=name&format=raw'
        }).flexReload();
    });
});

我添加了一个按钮来执行对控制器的调用

 <input type="button" id="LoadProducts" value="Load The product grid" >

但我仍然不知道如何在不影响排序、搜索、分页事件的情况下链接加载 flexigrids

于 2012-08-19T20:53:20.433 回答