查看对话框：

Question

我在对话框中使用SlickGrid表创建了一个视图。而且我找不到如何将选定的行（在复选框中选中）返回到父视图中。我找不到任何示例来了解如何实施此方法。选择完成后，对话框视图中应触发一些排气孔。在父视图中，应该捕获此事件。但是我不知道该怎么做。感谢您的帮助

这是我的代码：

查看对话框：

@model IEnumerable @using Newtonsoft.Json

<div>
    <div id="myGrid" style="width:350px;height:500px;"></div>
</div>

<script>
    var md = Html.Raw(JsonConvert.SerializeObject(this.Model));
    var mdd = md;
    var grid;
    var selectedRows = [];
    var chosenItems = [];
    var data = [];
    var options = {
        enableColumnReorder: false,
        multiColumnSort: true,
        editable: true,
        enableCellNavigation: true,
        asyncEditorLoading: false,
        autoEdit: false,
        frozenColumn: 1
    };

    var colms = [          
    {id: 0, name:"Name", field:"Name",width:200 },
    {id: 1, name:"NDB_No", field:"NDB_No", width:40},
    {id: 2, name:"GrpTypeFlag", field:"GrpTypeFlag", width:40 },
    {id: 3, name:"FdGrp_CD", field:"FdGrp_CD", width:40 }
    ];
    var columns = [];

     $(function () {
         for (var i = 0; i < md.length; i++) {
             var d = (data[i] = {});
             d["id"] = i;
             d[0]= md[i].Name;
             d[1]= md[i].NDB_No;
             d[2]= md[i].IdFdGrpFlg;
             d[3]= md[i].FdGrp_CD;
         }

         var checkboxSelector = new Slick.CheckboxSelectColumn({
             cssClass: "slick-cell-checkboxsel"
         });

         columns.push(checkboxSelector.getColumnDefinition());

         for (var i = 0; i < colms.length; i++) {
             columns.push({
                 id: i,
                 name: colms[i].name,
                 field:  i,
                 sortable: true, 
                 width:colms[i].width
             });
         }

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

         grid.onSort.subscribe(function (e, args) {
             var cols = args.sortCols;
             data.sort(function (dataRow1, dataRow2) {
                 for (var i = 0, l = cols.length; i < l; i++) {
                     var field = cols[i].sortCol.field;
                     var sign = cols[i].sortAsc ? 1 : -1;
                     var value1 = dataRow1[field], value2 = dataRow2[field];
                     var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
                     if (result != 0) {
                         return result;
                     }
                 }
                 return 0;
             });
             grid.invalidate();
             grid.render();
         });

         grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
         grid.registerPlugin(checkboxSelector);
         var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
     });
</script>

函数调用对话框：

function dialogUP（）{

        document.getElementById("dialog-form").innerHTML = '';
        $("#dialog-form").dialog({
            autoOpen: true,
            position: { my: "right+350 bottom-100" },
            width: 490,
            height: 570,
            resizable: false,
            title: foodSourceName + ': ' + grpName,
            modal: false,

            open: function () {
                var url = '@Url.Action("TestDialog", "TestAtida")';
                url += '/?grpCD_name=' + grpCD + '=' + foodSourceType;
                $(this).load(url);

            },
            buttons: {
                'Cancel': function () {
                    partialFree = 0;
                        $(this).empty(); 
                        $(this).dialog('close'); 
                        $input.focus().select(); 
                }
            }
        });

    };

Answer 1

似乎您正在使用ASP NET Core MVC。

SlickGrid没有内置的任何服务器端挂钩。您可以为复选框列使用编辑器/格式化程序，并且复选框状态将仅保存到data对象中。或者，如果您希望保留已发布的列配置，则您的代码可以创建所选列索引的列表。
将有某种触发方式来开始保存数据，也许是在对话框关闭时，所以您将使用HTML绑定事件来执行此操作。

由您决定将数据持久保存到服务器上，无论使用AJAX和API控制器，还是使用常规控制器和POST操作。

使用SlickGrid表从对话框返回选定的行

查看对话框：

函数调用对话框：

1 个答案: