0

私はslickgridをテストしています。

HTMLコード

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Slick Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="stylesheet" href="jquery-ui.css" type="text/css" />
        <link rel="stylesheet" href="slick/css/slick.grid.css" type="text/css" />

        <script src="jquery.js"></script>
        <script src="jquery.event.drag-2.0.min.js"></script>
        <script src="slick/js/slick.core.js"></script>
        <script src="slick/js/slick.grid.js"></script>
        <script src="slick/js/slick.dataview.js"></script>

        <script src="main/js/main.js"></script>

    </head>

    <body>
        <div style="float:left">
            <input placeholder="EAN Code" type="text" id="ean">
            <input placeholder="Quantity"  type="text"id="qty">
            <input placeholder="Amount" type="text" id="amt">
            <input placeholder="Discount" type="text" id="disc">
            <button id="add-product">
                Add Product
            </button>
        </div>

        <br />

        <div id="invoice-grid" style="clear:both">
        </div>

    </body>
</html>

JS コード - main.js

var grid, dataView;

var gridOptions, gridColumns;

var products = []

$(function() {


    gridColumns = [
        {id:'ean', name:'EAN', field:'ean', cssClass: 'grid-cell'},
        {id:'qty', name:'Qty', field:'qty', cssClass: 'grid-cell'},
        {id:'mrp', name:'MRP', field:'mrp', cssClass: 'grid-cell'},
        {id:'disc', name:'Discount', field:'disc', cssClass: 'grid-cell'},
        {id:'net_amt', name:'Net Amt', field:'net_amt', cssClass: 'grid-cell'}
    ];

    gridOptions = {
        editable: true,
        autoEdit: true,
        enableAddRow: false,
        enableCellNavigation: true,
        asyncEditorLoading: false,
        enableColumnReorder: false,
        rowHeight: 35
    };

    dataView = new Slick.Data.DataView();

    grid = new Slick.Grid($('#invoice-grid'), dataView, gridColumns, gridOptions);

    updateRows =  function(updateData) {
        console.log(products);
        dataView.beginUpdate();
        dataView.setItems(products);
        dataView.endUpdate();

        grid.updateRowCount();

        if (updateData) {
            grid.setData(dataView, true);
        }

        grid.render();

    }

    updateRows(false);

    $("#add-product").click(function() {

        ean = $("#ean").val();
        qty = $("#qty").val();
        amt = $("#amt").val();
        disc = $("#disc").val();

        if (ean === '' || qty === '' || amt === '' || disc === '') 
        return;

        newProduct = {
            id: ean,
            ean: ean,
            qty: qty,
            amt: amt,
            disc: disc,
            net_amt: (amt - disc)
        }

        products.push(newProduct)

        updateRows(true);

        $("#ean").val('');
        $("#qty").val('');
        $("#amt").val('');
        $("#disc").val('');

    });

});

このページの目的は、入力テキスト ボックスから値を取得し、それらを新しいエントリとしてグリッドに配置することです。ただし、新しい行が作成されておらず、grid-canvas要素キャンバスが次のようになっているため (追加した要素の数に関係なく)、私が作成したスクリプトに問題があるようです。

<div class="grid-canvas" style="height: 35px; width: 400px;">
    <div class="ui-widget-content slick-row even" style="top:0px">
        <div class="slick-cell l0 r0 grid-cell">1</div>
        <div class="slick-cell l1 r1 grid-cell">1</div>
        <div class="slick-cell l2 r2 grid-cell"></div>
        <div class="slick-cell l3 r3 grid-cell">1</div>
        <div class="slick-cell l4 r4 grid-cell">0</div>
    </div>
</div>

slickgrid の実装が間違っていることを理解しているようです。誰かが私を正しい方向に導くことができますか？

4

1 に答える 1

0

次のスタイルを自分に追加することで問題を解決しましたinvoice-grid

width:800px; height: 500px;

ただし、スタイリングが行の追加に影響する理由はわかりません。

于 2012-11-24T10:18:38.650 に答える