Question

我正在测试slickgrid。

HTML CODE

<!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 CODE - 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的实现错误。任何人都可以用正确的方式指导我吗？

Answer 1

我通过在invoice-grid

中添加以下样式解决了这个问题

width:800px; height: 500px;

我不确定为什么样式会影响行的添加。

Slickgrid - 缺少行

1 个答案: