如何添加/使用SlickGrid

如何寫這樣的功能，並將其綁定到兩個按鈕，如「添加行」和「刪除行」刪除行空白的底線。如何添加/使用SlickGrid

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>SlickGrid example 3: Editing</title> 
    <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> 
    <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="examples.css" type="text/css"/> 
    <style> 
    .cell-title { 
     font-weight: bold; 
    } 

    .cell-effort-driven { 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
<div style="position:relative"> 
    <div style="width:600px;"> 
    <div id="myGrid" style="width:100%;height:500px;"></div> 
    </div> 

    <div class="options-panel"> 
    <h2>Demonstrates:</h2> 
    <ul> 
     <li>adding basic keyboard navigation and editing</li> 
     <li>custom editors and validators</li> 
     <li>auto-edit settings</li> 
    </ul> 

    <h2>Options:</h2> 
    <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button> 
    &nbsp; 
    <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button> 
    </div> 
</div> 

<script src="../lib/firebugx.js"></script> 

<script src="../lib/jquery-1.7.min.js"></script> 
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> 
<script src="../lib/jquery.event.drag-2.0.min.js"></script> 

<script src="../slick.core.js"></script> 
<script src="../plugins/slick.cellrangedecorator.js"></script> 
<script src="../plugins/slick.cellrangeselector.js"></script> 
<script src="../plugins/slick.cellselectionmodel.js"></script> 
<script src="../slick.formatters.js"></script> 
<script src="../slick.editors.js"></script> 
<script src="../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 grid; 
    var data = []; 
    var columns = [ 
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator}, 
    {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText}, 
    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, 
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete}, 
    {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, 
    {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, 
    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox} 
    ]; 
    var options = { 
    editable: true, 
    enableAddRow: true, 
    enableCellNavigation: true, 
    asyncEditorLoading: false, 
    autoEdit: false 
    }; 

    $(function() { 
    for (var i = 0; i < 500; i++) { 
     var d = (data[i] = {}); 

     d["title"] = "Task " + i; 
     d["description"] = "This is a sample task description.\n It can be multiline"; 
     d["duration"] = "5 days"; 
     d["percentComplete"] = Math.round(Math.random() * 100); 
     d["start"] = "01/01/2009"; 
     d["finish"] = "01/05/2009"; 
     d["effortDriven"] = (i % 5 == 0); 
    } 

    grid = new Slick.Grid("#myGrid", data, columns, options); 

    grid.setSelectionModel(new Slick.CellSelectionModel()); 

    grid.onAddNewRow.subscribe(function (e, args) { 
     var item = args.item; 
     grid.invalidateRow(data.length); 
     data.push(item); 
     grid.updateRowCount(); 
     grid.render(); 
    }); 
    }) 
</script> 
</body> 
</html>

來源

2012-10-15 lkahtz

最終我想出了自己。如果你對如何做到這一點有更好的想法，請告訴我。

$("#add_row").click(function() { 
    var dd = grid.getData(); 
    dd.splice(dd.length,0,{"title":""}); 
    grid.invalidateRow(data.length); 
    grid.updateRowCount(); 
    grid.render(); 
    grid.scrollRowIntoView(dd.length-1) 
}) 

$("#remove_row").click(function() { 
    var dd = grid.getData(); 
    var current_row = grid.getActiveCell().row; 
    dd.splice(current_row,1); 
    var r = current_row; 
    while (r<dd.length){ 
    grid.invalidateRow(r); 
    r++; 
    } 
    grid.updateRowCount(); 
    grid.render(); 
    grid.scrollRowIntoView(current_row-1) 
})

來源

2012-10-15 06:32:38 lkahtz

那麼這是你做過的同樣的事情，但稍有不同的原因，我不重新呈現。

在下面請看：

  var data= grid.getData(); 
      var rows= grid.getSelectedRows(); 

      for (var i = 0; i < rows.length; i += 1) { 
       data.splice(rows[i], 1); 
      } 
      grid.setData(data, true);

來源

2012-12-06 12:34:40 aemonge

使用grid.invalidateAllRows（）的代替grid.invalidateRow（）循環。

來源

2013-03-14 06:54:40 Vladimir

您可以通過使用DataView的insertItem和deleteItem以更簡單的方式執行此操作。

function add_new_row(){ 
item = { 
     "id": (Math.round(Math.random()*-10000)) 
    }; 
data_view.insertItem(0, item); 
} 

function delete_row(e, args){ 
var selectedrows = grid.getSelectedRows(); 
var len = selectedrows.length; 
var sure= confirm("Are You Sure You Want to Delete?"); 
if(sure){ 
    for(var i=0;i<len;i++){       
    var data = grid.getData().getItem(selectedrows[i]);       
    data_view.deleteItem(data.id)             
    } 
} 
}

然後，用按鈕綁定。

<button onclick="add_new_row()">ADD</button> 
<button onclick="delete_row()">DELETE</button>

來源

2014-02-13 04:26:45 HeiN

如何添加/使用SlickGrid

回答

相關問題