你如何建立数据表编辑器在Rails中,然后处理JSON响应?

问题描述 投票:-1回答:1

没有为ROR和数据表编辑器目前不支持。

我张贴我的解决方案,以数据表编辑器的导轨和嵌套属性的基本工作示例。

我欢迎这个代码的任何改进。谢谢!

ruby-on-rails ajax ruby-on-rails-4 jquery-datatables-editor
1个回答
0
投票

在资产/ JavaScript的

var editor;

$('document').ready(function(){

  editor = new $.fn.dataTable.Editor( {
    idSrc:  'id', //us "id" field for unique id
    table: '#questions',
    ajax: {
      create: {
        type: 'POST',
        url:  "/api/v1/questions"
      },
      edit: {
        type: 'PATCH',
        url:  '/api/v1/questions/_id_'
      },
      remove: {
        type: 'DELETE',
        url:  '/api/v1/questions/_id_'
      }
    },

    fields: [

        { label: 'Final',  name: 'final' },
        { label: 'Name', name: 'name' },
        { label: 'Answer A', name: 'answers.0.title' },
        { label: 'Explanation A', name: 'answers.0.explanation' },
        { label: 'id A', name: 'answers.0.id' },
        { label: 'ID', name: 'id' }
       //.....
    ]
    });



  $('#questions').DataTable({
    dom: 'Bfrtip',
    ajax: {
      "url": "/api/v1/questions",
      "dataSrc": ""
    },
    columnDefs: [
    {
      targets: '_all',
      defaultContent: " "
    }],
    columns: [
      {data: "final"},
      {data: "name", sortable: false},
      {data: "answers.0.title", sortable: false},
      {data: "answers.0.explanation", sortable: false},
      {data: "answers.0.id", sortable: false, visible: false},
      //.....
      {data: "id", sortable: false}
    ],
    "order": [[ 0, "asc" ],[1, "asc"]],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
  });

//the following is for formatting the data for question_params in the controller

  editor.on( 'preSubmit', function ( e, data, action ) {
    if ( action === 'create' ) {
      data.question = data.data[0];
      delete data.data;
      data.question.answers_attributes = data.question.answers;
      delete data.question.answers;
    }
    else if ( action === 'edit' ) {
      var id = Object.keys(data.data)[0];
      data.question = data.data[id];
      data.question.answers_attributes = data.question.answers;
      delete data.data;
      delete data.question.answers;
    }

  });


});

在HTML文件

<table class="table table-striped" id="questions">
  <thead>
    <tr>
      <th>Final?</th>
      <th>Name</th>
      <th>Answer A</th>
      <th>Explanation A</th>
      <th>id a</th>
      <th>id</th>
      <! ---- .......-->
    </tr>  
  </thead>


</table>

控制器/ API / V1 / questions_controller

class Api::V1::QuestionsController < Api::V1::BaseController
  protect_from_forgery with: :null_session

  def index
   #display data in JSON for editor to read
   data = Question.order(:spread_sheet_number).to_json(:include => :answers)
   render json: data
  end


  def update
    question = Question.find_by(id: params.fetch(:id))
      if question.update(question_params)
        data = { "data" => Question.where(id: question.id).as_json(include:[:answers])}
        render json: data
        #...
    end
  end


    def create
      question = Question.new(question_params)
      if question.save
        data = { "data" => Question.where(id: question.id).as_json(include:[:answers])}
        render json: data
       #...
      end
    end


    def destroy
      question = Question.find(params.fetch(:id))
      question.destroy
      respond_with {}
    end

    private
      def question_params
        params.require(:question).permit(:name :final, answers_attributes: [:id, :title, :explanation, :_destroy])
      end

end
© www.soinside.com 2019 - 2024. All rights reserved.