추가/같은 함수를 작성하고 "행을 제거" "행을 추가"와 같은 두 개의 버튼에 바인딩하는 방법 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

답변

관련 문제