Question

我正在使用Teleric kendo UI网格。我正在使用数据库表来存储网格选项以保存（保持）网格状态（列排序，列默认可查看等）。它为每个用户保存选项，当用户登录agin时，状态将自动使用ajax调用。一切正常

但问题是加载保存状态后编辑按钮不起作用。请帮忙。

提前致谢

<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<?php echo $this->session->flashdata('message');?> 
<div class="panel panel-default">
<div class="panel-heading clearfix">

<div class="panel-body">

<?php
$transport = new \Kendo\Data\DataSourceTransport();

$read = new \Kendo\Data\DataSourceTransportRead();

$read->url(site_url('task/jsonMData'))
     ->contentType('application/json')
     ->type('POST');

$transport->read($read)
          ->parameterMap('function(data) {
              return kendo.stringify(data);
          }');

$model = new \Kendo\Data\DataSourceSchemaModel();

$id = new \Kendo\Data\DataSourceSchemaModelField('id');
$id->type('number');

$Name = new \Kendo\Data\DataSourceSchemaModelField('name');
$Name->type('string');

$Address = new \Kendo\Data\DataSourceSchemaModelField('address');
$Address->type('string');



$model->addField($id)
        ->addField($Name)
        ->addField($Address);


$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')
       ->model($model)
       ->total('total');

$dataSource = new \Kendo\Data\DataSource();

$dataSource->transport($transport)
           ->pageSize(500)
           ->schema($schema)
           ->serverFiltering(true)
           ->serverSorting(true)
           ->serverGrouping(false)
           ->serverPaging(true);

$grid = new \Kendo\UI\Grid('grid');

$idField = new \Kendo\UI\GridColumn();
$idField->field('id')
            ->locked(false)
            ->width(60)
            ->hidden(true)
            ->title('ID');


$nameField = new \Kendo\UI\GridColumn();
$nameField->field('name')
          ->width(100)
          ->locked(false)
          ->hidden(true)
          ->title('Name');
$addressField = new \Kendo\UI\GridColumn();
$addressField->field('address')
          ->width(200)
          ->locked(false)
          ->hidden(true)
          ->title('Address');



$command = new \Kendo\UI\GridColumnCommandItem();
$command->click('commandClick')
        ->text('Edit');

$commandColumn = new \Kendo\UI\GridColumn();
$commandColumn->addCommandItem($command)
        ->title('Edit')
        ->width(125);

$excel = new \Kendo\UI\GridExcel();
$excel->fileName(' Task Export.xlsx')
      ->filterable(true)
      ->proxyURL('task/saveToExcel');

$grid->addColumn($id,
$name, $commandColumn)
     ->height(500)
     ->scrollable(true)
     ->editable('popup')
     ->dataSource($dataSource)
     ->resizable(true)
     ->reorderable(true)
     ->sortable(true)
     ->filterable(true)
     ->columnMenu(true)
     ->pageable(true)
     ->addToolbarItem(new \Kendo\UI\GridToolbarItem('excel'))
     ->excel($excel);

$grid->columnHide('function(e) { saveGridState(); }');
$grid->columnShow('function(e) { saveGridState(); }');

 echo $grid->render();
?>

</div></div></div>

<div style="display:none;">
<a href="#" id="hidden-link" class="fancybox fancybox.iframe">Click</a>
<input type="hidden" name="rowIndex" id="rowIndex" value="-1" />
<input type="hidden" name="taskId" id="taskId" value="0" />
</div>
<!--to support excel import -->
<script>
function commandClick(e) {


        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem);

        var grid = $(e.currentTarget).closest("tr");
        var row = grid.select();

        var rowIndex = row.index();

        var j = $('#hidden-link');
        if(j)
        {
          $('#rowIndex').val(rowIndex);
          $('#taskId').val(dataItem.id);
          j.attr('href','<?php echo base_url()."task/edit";?>/'+dataItem.id)
          j.click();
        }
    }
</script>   
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        'afterClose':function () {
            var rowIdx = $('#rowIndex').val();
            var taskId = $('#taskId').val();
            if(taskId != 0 && rowIdx >= 0)
            {
                userData = 'id='+taskId;
                $.ajax({
                    url: "<?php echo site_url('task/getTaskById');?>",
                    type: "post",
                    data: userData,
                    dataType: "json",
                    success: function(data){
                        var firstRowItem = $('#grid').data().kendoGrid.dataSource.data()[rowIdx];

                        firstRowItem.set('Name',data.name);
                        firstRowItem.set('Plant',data.address);


                    },
                    async:false,
                    error:function(){

                        alert('There is error while submit');
                    }

                });
            }
        },
      });


         var grid = $("#grid").data("kendoGrid");
         userData = "type='m'";
         $.ajax({
        url: "<?php echo site_url('task/getGridSavedState');?>",
        type: "post",
                data:{type:'m'},
               // contentType:'application/json',
        dataType: "json",
        success: function(data){
                    if(data.columns)
                    {
                     options=data;
                     grid.setOptions(options);
                    }
                },
                error:function(){

            console.log("Error loding save grid state");
        }
        });

});
function saveGridState()
{
    var grid = $("#grid").data("kendoGrid");
    gridOptions=grid.getOptions();
    var request=kendo.stringify({gridOptions : gridOptions,type:'m'});

    $.ajax({
        url: "<?php echo site_url('task/saveGridState');?>",
        type: "post",
                contentType:'application/json',
        data: request,
        dataType: "json",
        success: function(data){
                    console.log("stated saved");
                },
                error:function(){

            console.log("Error in stated saved")
        }
        });

}

</script>

Answer 1

来自API文档

请注意，当检索选项对象，然后通过JSON.stringify（options）将其序列化为字符串时，作为函数的每个字段都将丢失。这是JSON.stringify所做的序列化限制。您需要在解析对象之后显式设置作为函数的字段，或者需要使用一些自定义实现来进行序列化以处理JavaScript函数的序列化。

所以你需要再次将命令按钮绑定到函数：至少我认为这就是它们的意思。因此，请尝试在setOptions之后添加一个基本的jQuery（＆＃39;选择器＆＃39;）on（＆＃39; click＆＃39;）函数。

Answer 2

  var grid = $("#grid").data("kendoGrid");
     userData = "type='m'";
     $.ajax({
    url: "<?php echo site_url('task/getGridSavedState');?>",
    type: "post",
            data:{type:'m'},

    dataType: "json",
    success: function(data){
                if(data.columns)
                {
                 options=data;
                 if(options.editable)
                     {
                        //popout last column i.e command column
                         edit= options.columns.pop()
                         //add new command column explicitly.
                         commandCol={"command":[{"text":"Edit","click":commandClick}],"title":"Edit","width":125};
                         options.columns.push(commandCol);
                         grid.setOptions(options);
                     }
                 }
            },
            error:function(){

        console.log("Error loding save grid state");
    }
    });

加载持久状态后，kendo ui网格编辑按钮不起作用

2 个答案: