2

我有一个奇怪的问题,我找不到在 SO 或其他方面的参考。除了两个关键问题和我想做的两件事外,我的网格似乎在所有方面都运行良好。回复时,我不希望所有问题都能得到回复,即使您有其中一个问题的信息,也请将其作为答案发布。有关我的问题的视觉效果,请参阅下面的图片。

第一个问题:
每当将数据放入空行的任何字段并单击选项卡时,都会生成一个新行。如果所选单元格位于该行的最后一列,我只想要这种行为

第二个问题:
每当添加一个超出我定义的 div 边缘的新行并且出现垂直滚动条时,就会添加一个额外的不可选择的列,它会在我的网格底部创建一个水平滚动条。该栏隐藏了底行的一部分。如何防止出现此水平条。

第三个请求:当网格创建新行时,如何验证以确保当前最后一行中的每个单元格中都有数据,然后才允许选项卡效果添加新行。

最终请求:单击一个单元格并获得焦点后,除非选择另一个单元格,否则它不会失去焦点。如果用户单击网格之外的任何内容,我需要失去焦点。

即使没有填充所有单元格,也显示添加新行,并且选择器位于第一个单元格中 即使其他列为空并且选择了行中的第一个单元格(应该是最后一个单元格),也会添加新行

显示底部滚动条提出的问题 底部滚动条出现时出现的问题

HTML

<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.css" />

<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.20.custom.css" />
<link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.darren1.css" />

    <form id="myGridForm" action="" method="post">
        <div style="position:relative; overflow:visible; margin:25px 0 0 0;">
            <div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"><img src="images/loading.gif" border="0" /></div>
            <div id="dateInput" style="position:relative;z-index:990;visibility:hidden;">
                 <!-- jQuery DatePicker shows here -->
                 <p><label for="datepicker">Click to change date:</label><input type="text" id="datepicker" name='datepicker'size="30" readonly="readonly"/></p> 
            </div>
            <div id="myGrid" style="height: 177px; width: 902px; float: left; overflow: hidden; position: relative; visibility: hidden;" >
                <!-- #myGrid.slickGrid goes here -->
            </div>

        </div>

        <div class="options-panel" style="  -moz-border-radius: 6px;  -webkit-border-radius: 6px;  border: 1px solid silver;  background: #f0f0f0;  padding: 4px; margin: 0 0 220px 0;  width: 880px;position: absolute;  top: 315px;  left: 280px;">
            <h2>Instructions:</h2>
            <ul>
                <li>Select the date by clicking the date image above the table</li>
                <li>Enter your event data (you can enter multiple events for that date)</li>
                <li>To add another event, hit your <em>TAB</em> key and a new row will be created</li>
                <li>When you're all done for this date, click the <em>Commit Changes</em> button to have your events saved to the site</li>
            </ul>
            <input type="hidden" name="p" id="p" value="<?=$_POST['p']?>" />
            <input type="hidden" name="k" id="k" value="<?=$_POST['k']?>" />
            <input type="hidden" name="i" id="i" value="<?=$_POST['i']?>" />
            <input type="hidden" name="d" id="d" value="<?=$_POST['d']?>" />
            <input type="hidden" name="gridData" id="gridData" />
           <div id="submitButton" style="visibility:hidden;"> <button type="submit">Commit Changes</button></div>    
        </div>
    </form>    
<script>
    console.log('json2 Loadstatus: '+json2Loaded);
</script>  

<script  type="text/javascript" language="javascript" src="js/slickGrid/lib/firebugx.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"></script>
<script type="text/javascript" src="js/json2.js.php"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>
<script src="js/slickGrid/jquery.event.drag-2.0.min.js"></script>
<script src="js/slickGrid/slick.core.js"></script>
<script src="js/slickGrid/slick.grid.js"></script>

<script>
    function requiredFieldValidator(value) {
        if (value == null || value == undefined || !value.length) {
          return {valid: false, msg: "This is a required field"};
        } else {
          return {valid: true, msg: null};
        }
      }

    var columns = [
    { id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
    { id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: Slick.Editors.Text },
    { id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, cssClass: "cell-right", editor: Slick.Editors.Text },
    ];

    var data = [
        {
        "VisitDate": "11/30/2009",
        "VisitTime": "0117",
        "PrimaryComplaint": "General malaise "
        },
        {
        "VisitDate": "02/08/2010",
        "VisitTime": "0930",
        "PrimaryComplaint": "General malaise "
        }
    ];

    var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    forceFitColumns: true
    };

    var grid = new Slick.Grid("#myGrid", data, columns, options); 
    grid.onAddNewRow.subscribe(function (e, args) {
        var item = args.item;
        grid.invalidateRow(data.length);
        data.push(item);
        grid.updateRowCount();
        grid.render();
    });     
    $('#loader').hide();
    $('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
    $('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
    $('#submitButton').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
    $.getScript("js/jquery.calendarPicker.js"); 
    $.getScript("js/jquery.json-2.3.min.js");   
</script>

<script>
    console.log('json2 Loadstatus: '+json2Loaded);
</script>


<? //Instantiate datepicker jQueryUI widget ?>
<script>
$(document).ready(function(){

    $(function() {

            $( "#datepicker" ).datepicker({ numberOfMonths: [1, 3] });

            $( "#datepicker" ).datepicker( "option", "showAnim", "clip");
            $( ".selector" ).datepicker( "option", "showOn", "both" );

    }); // end function()
});  // end doc.ready

$('#myGridForm').submit(function() {
    console.log ( ' myGrid data1: '+ $('grid').data() );
    console.log ( ' myGrid data2: '+ $('#myGrid').data() );
    var datum = $('#myGrid').data();
    console.log ( ' myGrid data3: '+  $('datum').serialize() );
    console.log ( ' myGrid data4: '+  JSON.stringify(data) );
    $("input[name='gridData']").val(JSON.stringify(data));


  // stops submit /ie. return false;
});
</script>   
4

0 回答 0