Geek asks and answers

Tabs in JQUERY to load JQGRID

I am making a grid using jqgrid

I want to create tabs in my application. By clicking on the tab, you have to open the grid, and the name of the tab should appear on top of the page and when I click on another tab, it should load another grid. grids should be loaded on the same page, and tabs should also appear all the time on the page. I have already created grids, I just want to integrate them with tabs ... plzz help me thanks in advance .....

+5
source share
2 answers

Good thing the following code will be for you. I use the same data for both (emp, manager) tabs, which you can change later.

HTML

 <div id="tabs">
    <ul>
        <li><a href="#tabs-1" id="tab1">emp</a></li>
        <li><a href="#tabs-2" td="tab2">manager</a></li>

    </ul>
    <div id="tabs-1">
        <table id="list"><tr><td/></tr></table>
                <div id="pager"></div>
    </div>
    <div id="tabs-2">
        <table id="list1"><tr><td/></tr></table>
        <div id="pager1"></div>
        </div>

</div>

Javascript

$(function () {
            'use strict';
            var $tabs=$('#tabs').tabs();

            var selected = $tabs.tabs('option', 'selected');

            if(selected==0){

               var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list"),$pager = $("#pager");
                callMe($grid,mydata,$pager);


          }
          $('#tabs').bind('tabsselect', function(event, ui) {

    selected=ui.index;

    if(selected==0)
    {
     var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list"),$pager = $("#pager");
                callMe($grid,mydata,$pager);
    }

    if(selected==1)
    {
     var mydata = [
                    {id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"}

                ],
                $grid = $("#list1"),$pager = $("#pager1");
                callMe($grid,mydata,$pager);
    }

        });
            function callMe(grid,mydata,pager){
            grid.jqGrid({
                datatype: 'local',
                data: mydata,
                colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
                colModel: [
                    {name: 'invdate', index: 'invdate', width: 90, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 100},
                    {name: 'amount', index: 'amount', width: 105, formatter: 'number', sorttype: 'number', align: 'right'},
                    {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right', hidden: true},
                    {name: 'total', index: 'total', width: 90, formatter: 'number', sorttype: 'number', align: 'right'},
                    {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
                        edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
                    {name: 'ship_via', index: 'ship_via', width: 130, align: 'center', formatter: 'select',
                        edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
                    {name: 'note', index: 'note', width: 90}
                ],
                rowNum: 10,
                rowList: [5, 10, 20],
                pager: pager,
                gridview: true,
                rownumbers: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption: 'Buttons in the column headers',
                height: '100%'
            });
           } 
        });

, emp, 0, , tabselect, . emp - 0, - 1. , , . . ui, . .

+8

,

, , jquery. jqueryUI 1.10.x , "active" optionName "selected", : http://jqueryui.com/upgrade-guide/1.10/#removed-selected-option-use-active

. , jQuery UI 1.10.3:

<script >
    $(function () {
        'use strict';
        var $tabs = $('#tabs').tabs();

        var selected = $tabs.tabs('option', 'active');

        alert(selected);
        if (selected == 0) {

            var mydata = [
                 { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

            ],
             $grid = $("#list"), $pager = $("#pager");
            callMe($grid, mydata, $pager);


        }

        $("#tabs").tabs({
            activate: function (event, ui) {

                selected = ui.newTab.context.id;
                alert(selected);
                if (selected == "tab1") {
                    var mydata = [
                                   { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

                    ],
                               $grid = $("#list"), $pager = $("#pager");
                    callMe($grid, mydata, $pager);
                }

                if (selected == "tab2") {
                    var mydata = [
                                   { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }

                    ],
                               $grid = $("#list1"), $pager = $("#pager1");
                    callMe($grid, mydata, $pager);
                }


            }
        });
+2

More articles:


All Articles