Question

$.fn.alreadyEnteredDataGrid = function () {
    try {
        jQuery("#editDataGridList").jqGrid({
            datatype: "local",
            height: 100,
            width: 930,           
            //gridview: true,
            //viewrecords: true,
            //pager: '#pager',
            //rowNum: 25,
            //rowList: [25, 50, 100],
            //scrollOffset: 0,
            colNames: ['Interview id', 'Form Name','Date of observation', 'Name of enumerator'],
            colModel: [
                { name: 'InterviewId', index: 'InterviewId' },
                { name: 'FormName', index: 'FormName' },                          
                { name: 'Date', index: 'Date' },            
                { name: 'NameOfEnum', index: 'NameOfEnum' }
            ],
            multiselect: false,
            caption: "Edit already entered data"
        });
    }
    catch (e) {
        alert(e.message);
    }

    var data = window.localStorage;

    var mydata = [
            { InterviewId: "FormName/date1", FormName: "Form One", Date: "2013-08-01", NameOfEnum: "Joseoh" },
            { InterviewId: "FormName/date2", FormName: "Form One", Date: "2013-08-02", NameOfEnum: "Hussein" },
            { InterviewId: "FormName/date3", FormName: "Form One", Date: "2013-08-03", NameOfEnum: "Joseph" },
            { InterviewId: "FormName/date4", FormName: "Form One", Date: "2013-08-04", NameOfEnum: "Hussein" },
    ];
    for (var i = 0; i <= mydata.length; i++)
        jQuery("#editDataGridList").jqGrid('addRowData', i + 1, mydata[i]);


}

我正在使用JQM和HTML5来创建我的网格，但是height属性不起作用。我想将height属性设置为固定高度，并在行高超过设定高度时使网格可以扫描。

我把网格放在这里：

<div id="gridtable">
    <table id="editDataGridList"></table>
</div>

下面是我的.htm代码

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Home-Kimetrics on-the-go</title>   

    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->

    <link href="../Css/home.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.6.4.min.js"></script>

    <script>
         $(document).bind("mobileinit", function () {            
             $.extend($.mobile, {
                 defaultPageTransition: 'none',
                 defaultDialogTransition: 'none'
             });
         });
    </script>

    <!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>     -->

    <script src="../Scripts/jquery.mobile-1.0rc2.min.js"></script>
    <script src="../Scripts/Home.js"></script>
    <script src="../Scripts/jszip.js"></script>
    <script src="../Scripts/jquery.jqGrid.js"></script>
    <script src="js/Sync.js"></script>

</head>
<body onbeforeunload="ConfirmClose()" onUnload="HandleOnClose()">  
   <!-- Start first page -->
    <div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">

  <div data-role="header" data-position="fixed" data-id="header">
      <div id="logo"><img src="../img/onthegologo.png"> <div id="txt"> ki-metrics on-the-go </div>  </div> 
      <a href="#" id="logout" class="ui-btn-right">Logout</a>
     <!-- <span style="float:right"><label for="user" id="user"></label> </span>       
        <label for="networkStatus" id="networkStatus"></label>-->

      <div data-role="navbar">
    <ul>
        <li><a href="#homePage" class="ui-btn-active ui-state-persist"  >Enter data</a></li>
        <li><a href="#syncData" >Sync data</a></li>
        <li><a href="#manageData">Manage data</a></li>
    </ul>
</div><!-- /navbar -->
  </div> <!-- /header -->
<div data-role="content">
             <div style="width:100%;"> 
<div id="editDataGrid" style="float:left; width:30%;">
<h4 id="frmName"></h4>
     <table id="sectionGrid"></table>
   </div>
<div id="enterDataGrid" style="float:right; width:70%; ">   
    <div id="cbo_id"></div>  
    <a href="#" data-role="button" data-transition="flip" id="createNewRecord">Create new record</a>    
    <div id="sectDetails"> <!--section details-->
     <div id="sectionControls">       
        <h4 id="sections"></h4>
    </div>
        <div id="gridtable">
          <table id="editDataGridList"></table>
            </div>
        </div><!--end section details-->
</div>

</div>

</div><!-- /content -->
  <footer data-role="foot" data-position="fixed">

  </footer>
        </div><!-- /page -->
</body>
</html>

jquery网格高度不起作用

0 个答案: