w2uiのgridにソート機能を追加する

やりたいこと

前回導入したgridにソート機能を追加したい

前回記事:
https://qiita.com/wancoro/items/44de3104866cd6694b62

実装

前回作成したスクリプト

<script>
  $(function () {
    $('#grid').w2grid({
      name: 'grid_name', 
      header: 'List of Tasks',
      url: {
        get: '/parent_tasks.json'
      },
      method: 'GET',
      show: {
        toolbar: true,
      },
      recid: 'id',
      limit: 10,
      columns: [
        { field: 'id', caption: 'id', size: '8%' },
        { field: 'name', caption: 'name', size: '30%' },
        { field: 'priority', caption: 'priority', size: '10%' },
        { field: 'status', caption: 'status', size: '10%' },
        { field: 'created_at', caption: 'created_at', size: '40%' }
      ],
      sortData: [
        { field: 'id', direction: 'asc' },
      ],
    });
  });
</script>

columnsの部分にsortable: trueを追加します

<script>
  $(function () {
    $('#grid').w2grid({
      name: 'grid_name', 
      header: 'List of Tasks',
      url: {
        get: '/parent_tasks.json'
      },
      method: 'GET',
      show: {
        toolbar: true,
      },
      recid: 'id',
      limit: 10,
      columns: [
        { field: 'id', caption: 'id', size: '8%', sortable: true }, # ここ
        { field: 'name', caption: 'name', size: '30%', sortable: true },
        { field: 'priority', caption: 'priority', size: '10%', sortable: true },
        { field: 'status', caption: 'status', size: '10%', sortable: true },
        { field: 'created_at', caption: 'created_at', size: '40%', sortable: true }
      ],
      sortData: [
        { field: 'id', direction: 'asc' },
      ],
    });
  });
</script>

ローカルデータを使用する場合はこの記述だけでソートができるようになるのですが、
リモートデータを使用する場合は、サーバ側でリクエストの処理を追記する必要があります

sortable: trueの状態でをgridのカラム名をクリックすると
urlで指定したパスに以下のようなパラメータが送信されます

request: {"cmd":"get","selected":[],"limit":10,"offset":0,"sort":[{"field":"id","direction":"asc"}]}

コントローラに処理を追加します

def index
  if params[:request]
    request = JSON.parse(params[:request])
    request.each do |key, value|
      case key
      when "limit"
        @limit = value
      when "sort"
        @column = value[0]["field"]
        @direction = value[0]["direction"]
      end
    end
    @tasks = ParentTask.limit(@limit).order("#{@column} #{@direction}")
  else
    @tasks = ParentTask.limit(10)
  end

  respond_to do |format|
    format.html
    format.json
  end
end

これでソートボタンがクリックされるたびに、DBからレコードをorderByで取得して
viewに渡すことができます

もっとキレイなソースコードの書き方があれば、ご教示頂けますと幸いです