如何使用 jquery 将带有 laravel 路由的 <a> 标签添加到表行

Posted 2023-03-14

【中文标题】如何使用 jquery 将带有 laravel 路由的 <a> 标签添加到表行

【英文标题】：how to add<a> tag with laravel routing to a table rowusing jquery

【发布时间】：2016-05-15 06:30:23

【问题描述】：

如何使用 jQuery 向带有 Laravel 路由的表格行添加标签？

exam.blade.php

<td>
    <a href=" URL::Route('editAdminexamtimes', array('cid' => $exam->cls_id, 'id' => $exam->id )) ">Time Table</a>
    <a href=" URL::Route('editExam', array('cid' => $exam->cls_id,'id' => $exam->id )) ">Edit</a>
    <a href=" URL::Route('deleteExam', $exam->id) "
       onclick="if (!confirm('Are you sure to delete this item?')) return false; " 
       title="Delete this Item"> <i class="glyphicon glyphicon-trash"></i> </a>
</td>

我可以使用 jQuery 编写上述代码吗？

【问题讨论】：

你的意思是用 Ajax 获取 url/anchor 吗？在这种情况下，您仍然需要该请求的路径。

我想要这样$("#datatable").find('tbody').append(

时间表) .但是我在href中写了什么？？

您总是需要以某种方式获取该网址。通过在模板中预先设置一个 js 变量，甚至通过 ajax 获取它。你是开发者，你制定规则。

我不知道如何获取 ajax 以外的 url。以下是否正确？ var url = URL::Route('editAdminexamtimes', array('cid' => $exam->cls_id, 'id' => $exam->id )) " 然后在 href 中使用这个变量。

【参考方案1】：

exam.blade.php

<td>
<a href="URL::Route('editAdminexamtimes', array('cid'=> $exam->cls_id ,'id' => $exam->id ))">Time Table</a> 
<a href="javascript:void(0);" id="editItem">Edit</a> 
<a href="javascript:void(0);" id="deleteItem" data-url="url('/')" title="Delete this Item" data-token=" csrf_token() ">
  <i class="glyphicon glyphicon-trash"></i>
</a>
</td>

使用 jquery 删除

$('#deleteItem').on('click',function()
        var token = $(this).data('token');
        var base_url = $(this).data('url');
        if(confirm('Are you sure to delete this item?'))
          $.ajax(
                url:baseurl+'/delete/'+$exam->id,
                type: 'DELETE',
                data:  _token :token,
                success:function(msg)
                   alert("success");
                
          );
         
         else
           return false;
);

【讨论】：

感谢您的回答。我还需要使用 jQuery 附加时间表、编辑、删除链接

时间表。使用 ajax url：base_url+'/editAdminexamtimes/'+$exam->id;

【参考方案2】：

我创建了一个辅助类 (gist here)，专门用于处理表格和创建此类操作链接。助手将使用$allowed 模型字段创建所有表行（包括表头）。循环遍历表行时，帮助程序类中的 createLinks() 函数仅传递 $model_name 用于资源和实际的 $obj。

因此，如果您的模型是 form，并且您从控制器向视图传递了 $forms 数组，则可以使用以下内容：

路线

Route::resource('form', 'FormController');

视图（即：form/index.blade.php）

<?php
/**
 * @var $forms array Form
 */

// Fields to show in table as name => label for table header
$allowed = array(
        'id'          => 'ID',
        'name'        => 'Name',
        'description' => 'Description',
        'created_at'  => 'Created',
        'updated_at'  => 'Updated'
);

// Optional extras like a model name for action links
$extras = array(
    'model' => 'form'
); ?>

<table class="make-datatable table table-responsive table-striped table-bordered" id="forms-table">
    !! TableHelper::createTable($forms, $allowed, $extras) !!
</table>

助手类

<?php
/**
 * Class TableHelper
 * @author Tom W. DeBerardine
 */
class TableHelper

    public static function createHeaderRow($obj, $allowed, $extras = array())
    
        $attributes = $obj[0]['attributes'];
        $html       = '<thead><tr>';

        foreach ($allowed as $attribute => $nice_name) 
            if (array_key_exists($attribute, $attributes)) 
                $html .= '<th>' . $nice_name . '</th>';
            
        

        if (array_key_exists('model', $extras)) 
            $html .= '<th>Actions</th>';
        

        $html .= '</tr></thead>';

        return $html;
    

    public static function createTableBody($obj, $allowed, $extras = array())
    
        $html = '<tbody>';
        foreach ($obj as $key => $value) 
            $html .= '<tr>';
            foreach ($allowed as $fkey => $field) 
                $html .= '<td>' . $value->$fkey . '</td>';
            

            if (array_key_exists('model', $extras)) 
                $html .= TableHelper::createLinks($extras['model'], $value);
            

            $html .= '</tr>';
        
        $html .= '</tbody>';

        return $html;
    

    public static function createLinks($model_name, $obj)
    
        $html = '<td>';
        $html .= '<a href="' . route($model_name . '.' . 'edit', [$obj]) . '">' . 'Edit' . '</a>&nbsp;';
        $html .= '<a href="' . route($model_name . '.' . 'show', [$obj]) . '">' . 'Show' . '</a>';

        $html .= \Form::open(array('url' => route($model_name . '.' . 'destroy', [$obj]), 'method' => 'delete'));
        $html .= '<button type="submit" class="btn btn-danger btn-mini" onclick="
            if (!confirm(\'Delete this object?\'))  return false; "><i class="glyphicon glyphicon-trash"></i> Delete</button>';
        $html .= \Form::close();
        $html .= '</td>';

        return $html;
    

    public static function createTable($obj, $allowed, $extras = array())
    
        return TableHelper::createHeaderRow($obj, $allowed, $extras) . TableHelper::createTableBody($obj, $allowed, $extras);
    

输出

<table class="make-datatable table table-responsive table-striped table-bordered" id="forms-table">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Created</th>
        <th>Updated</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Campaign 1</td>
        <td>First campaign form</td>
        <td>2016-01-01 15:59:39</td>
        <td>2016-01-01 16:53:34</td>
        <td>
            <a href="http://demo.com/form/1/edit">Edit</a>&nbsp; 
            <a href="http://demo.com/form/1">Show</a>
            <form method="POST" action="http://demo.com/form/1" accept-charset="UTF-8">
                <input name="_method" type="hidden" value="DELETE">
                <input name="_token" type="hidden" value="aURptz3LWIZMXwefq1HYnvi4kteGsIObloBPWlgR">
                <button type="submit" class="btn btn-danger btn-mini" onclick="
            if (!confirm('Delete this object?'))  return false; "><i class="glyphicon glyphicon-trash"></i> Delete
                </button>
            </form>
        </td>
    </tr>
    </tbody>
</table>

这假设您对show、edit 和delete 功能具有有效的控制器操作。如果您希望删除按钮通过 ajax 提交表单，只需拦截 submit() 事件并在您的 delete 控制器操作中检查请求是否为 ajax (if( $request->ajax() ) ...) 以发送 json 响应。