如何在選擇下拉列表時顯示flexigrid？

Question

您好，我需要在下拉列表中顯示選項中的flexigrid，我有三個選項，基於選擇我需要顯示適當的felxigrid，我該怎麼做？

$(document).ready(function() { 
$('.group').hide(); 
$('#option1').show(); 
$('#selectMe').change(function() { 
$('.group').hide(); 
$('#'+$(this).val()).show(); 

}); 
}); 

<div id="Dialog1" class="group"> 
<table id="InfoFlexGrid1"> 
      </table></div> 
<div id=Dialog2" class="group"><table id="InfoFlexGrid2"> 
      </table></div> 
<div id="Dialog3" class="group"><table id="InfoFlexGrid3"> 
      </table></div> 
$(document).ready(function(){ 
$("#cardInfoFlexGrid1").flexigrid({ 
    dataType: 'json', 
    //url: "verification_rep.json", 
colModel : [ 
    {display: 'Name', name : 'Name', width : 120,align: 'center',sortable : false }, 
    {display: 'Roll No', name : 'RollNo', width : 150, align: 'center' }, 
    {display: 'Description', name : 'description', width : 150, align: 'center', hide: false}, 
    {display: 'Remarks', name : 'remarks', width : 250,align: 'center', hide: false}, 
    {display: 'Date', name : 'date', width : 100,sortable : false, align: 'center'} 
    ], 
    searchitems : [ 
    {display: 'Name', name : 'Name'}, 
    {display: 'Roll No', name : 'RollNo', isdefault: true} 
    ], 
    buttons:[ 
     {name: 'Add', bclass: 'add', onpress : test}, 
    {name: 'Update', bclass: 'update', onpress : test}, 
    {name: 'Delete', bclass: 'delete', onpress : test}, 
    {separator: true} 
    ], 
    sortname: "Name", 
    sortorder: "asc", 
    title: 'Statistical Data Report', 
    usepager: true, 
    useRp: true, 
    rp: 15, 
    showTableToggleBtn: true, 
    width: 400, 
    height: 100, 
    singleSelect: true, 
    nowrap: true  
    }); 

    rows = new Array(); 
    rows.push({cell: ['Sample1','Sample','Sample','2','Y' ] }, 
     {cell: ['Sample2','Sample','Sample','2', 'Y' ] } 
      ); 

data = { 
total: 2,  
page:1, 
rows: rows 
    } 


}); 

    function test(com, grid) { 
     //alert("Hello"); 
     if(com=='Update'){ 
     $('#message-dialog').dialog().dialog("open"); 

    $('#InfoFlexGrid1').flexAddData(data); 
     }else if(com=='Delete'){ 
     confirm('Delete ' + $('.trSelected', grid).length + ' items?') 
     $('.trSelected', grid).remove(); 
    }else if(com=='save'){ 
     alert("Hello"); 
    // $("#manualDatEntryDialog").dialog("open"); 
    } 
} 
function procMe(com, grid) { 
var gridRows = $("#InfoFlexGrid1 tbody tr"); 
    gridRows.click(function(event){ 
    displaySelectedItem($(this).attr('id').substr(3)); 
    return false; 
    }); 
} 

喜歡我有我的頁面兩個flexigrids，我要顯示在下拉列表中選擇的每個選項裏面的一個flexigrid。對此有何想法？

Answer 1

我做了什麼，

我把DIV與所有網格表中的唯一ID。

<h1>Flexigrid Example Page</h1> 

<div id="f1" style="margin-bottom:10px;"> 
<table id="flex1" style="display:none"></table> 

</div> 
<div id="f2" style="margin-bottom:10px;"> 
<table id="flex2" style="display:none"></table> 

</div> 
<div id="f3" style="margin-bottom:10px;"> 
<table id="flex3" style="display:none"></table> 

</div> 

認沽期權，我想與事件

<select name="options" onchange="javascript:showflexi(this.value)"> 
     <option value="0" selected="selected">Choose one</option> 
     <option value="1">1st Table</option> 
     <option value="2">2nd Table</option> 
     <option value="3">3rd Table</option> 
    </select> 

看到現在，我已經添加了兩個行代碼

$(document).ready(function() 

//add class hideBody to hide the body content of the table 
    $('.flexigrid').attr('class','flexigrid hideBody');/*as all the grids table get flexigrid class*/ 

//add class vsble to mark the content is invisible 
    $('div.ptogtitle').attr('class', ' ptogtitle vsble'); //as all the toggle button get ptogtitle class 

現在我已經添加了showflexi（內）功能做動作選擇表號

function showflexi(val){ 

     $('.flexigrid').attr('class','flexigrid hideBody'); 
     $('div.ptogtitle').attr('class', ' ptogtitle vsble'); 
     if(val!=0){ 
      $('#f'+val+' .flexigrid').removeClass('hideBody'); 
      $('div.ptogtitle').removeClass('vsble'); 
     } 
} 

我想你想要這個。如果您不明白，請發表評論

Answer 2

哎剛剛檢查了這一點：希望這將幫助你....

http://flexigrid.info/

例編號。 3