Laravel + KendoUI - MultiSelect添加新项目并存储到数据库

时间:2018-04-17 08:36:13

标签: jquery ajax laravel kendo-ui multi-select

我在寻找,我怎么能" POST" Laravel控制器的新值,所以我可以将它存储到数据库中供将来使用。

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div>
        No data found. Do you want to add new item - '#: instance.input.val() #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>

添加新值脚本/操作(它在下拉列表中添加值(静态)而没有问题)

<script>
    function addNew(widgetId, value) {
        var widget = $("#" + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
                IssueID: 0,
                IssueName: value
            });

            dataSource.one("requestEnd", function(args) {
                if (args.type !== "create") {
                    return;
                }

                var newValue = args.response[0].IssueID;

                dataSource.one("sync", function() {
                    widget.value(widget.value().concat([newValue]));
                });
            });

            dataSource.sync();
        }
    }
</script>

multiselect / kendoui脚本

<script>
    $(document).ready(function() {
        var crudServiceBaseUrl = "/api/incident/issue";
        var dataSource = new kendo.data.DataSource({
            batch: true,
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/telephony",
                    dataType: "json"
                },
                create: {
                    url: crudServiceBaseUrl + "/telephony/create",
                    dataType: "json"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "IssueName",
                    fields: {
                        IssueID: { type: "number" },
                        IssueName: { type: "string" }
                    }
                }
            }
        });

        $("#telephonyissues").kendoMultiSelect({
            filter: "startswith",
            dataTextField: "IssueName",
            dataValueField: "IssueName",
            dataSource: dataSource,
            noDataTemplate: $("#noDataTemplate").html()
        });
    });
</script>

这是存储数据的控制器

public function storetelephony(Request $request)
{
    $id = $request['IssueId'];
    $name = $request['IssueName'];
    $category = $request['CategoryName'];

    $issue = new api_incident_issue();
    $issue->id = $request['IssueId'];
    $issue->IssueName = $request['IssueName'];
    $issue->CategoryName = $request['CategoryName'];
    $issue->save();  
}

以下是web.php

中配置的路由
Route::get('/api/incident/issue/telephony', 'ApiIncidentIssueController@indextelephony')->name('api_incident_issue_telephony');

Route::post('/api/incident/issue/telephony/create', 'ApiIncidentIssueController@storetelephony')->name('api_incident_request_telephony');

1 个答案:

答案 0 :(得分:0)

问题解决了。我在执行期间创建了Ajax帖子。感谢

                $.ajax({
                    url: "/api/incident/issue/telephony/create",
                    method: "post",
                    data: { 
                        IssueName : value,
                        IssueID: 0,
                        IssueCategory: "Telephony",
                        "_token": "{{ csrf_token() }}"
                    }
                });