0

我正在测试 slickgrid。

代码

<!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 回答