Php 加载持久状态后剑道ui网格编辑按钮不工作

我使用的是Teleric kendo用户界面网格。我使用一个数据库表来存储网格选项，以保存、持久化网格状态列顺序、无默认可查看列等。它为每个用户提供保存选项，当用户再次登录时，该状态将使用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>

来自API文档

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

---

因此，您需要再次将命令按钮绑定到函数：至少我认为这就是它们的意思。因此，请尝试添加一个基本的jQuery“选择器”。在setOptions之后单击函数。

Code？？？它在哪里？你知道，我们不是通灵者。@David Soussan，我已经编辑了我的问题并粘贴了代码。我试图在网格的编辑按钮上添加一个onclick事件。下面是代码：code$'.k-grid-edit'。单击函数e{e.preventDefault；commandClick；}；代码，但它对我不起作用您还必须传入事件您知道何时调用commandClickestill在函数commandClicke中传入事件e后将不起作用。我点击了tyr警报。但它也不起作用。开始使用Firebug或类似的浏览器javascript调试来逐步完成javascript代码。你将不得不进入剑道js，所以使用完整版本，而不是min。这需要时间，但你会学到很多。但是，如果您使用的是PHP包装器，那么您没有商业许可证和支持吗？无论哪种方式，都可以尝试剑道论坛来获得帮助。我找到了解决方案，即首先从columns数组中删除comand列，然后显式添加一个新的命令列。谢谢大卫·苏桑的宝贵帮助，非常感谢。

  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");
    }
    });