0

次のコードを使用して、jtable (こちら)をロードするページがあります。

<script type="text/javascript">
        $(document).ready(function () {
            $('#EventTypeTableContainer').jtable({
                title: 'Table of EventType',
                actions: {
                    listAction: 'Admin/GetEventTypeList',
                    createAction: 'Admin/CreateEventType',
                    updateAction: 'Admin/UpdateEventType',
                    deleteAction: 'Admin/DeleteEventType'
                },
                fields: {
                    EventTypeId: {
                        key: true,
                        list: true
                    },
                    ColourCode: {
                        title: 'Event Color',
                        width: '25%',
                        list: true
                    },
                    EventTypeName: {
                        title: 'Event Type',
                        width: '50%',
                        list: true
                    },
                    isSystemEventType: {
                        title: 'Modify/Delete',
                        width: '25%',
                        list: true,
                        create: false,
                        edit: true
                    }
                }
            });
            $('#EventTypeTableContainer').jtable('load');
        });
    </script>

テーブルがロードされ、「No Data Available!」と表示されます。ただし、次の JSON 文字列を返す listAction を呼び出します (例として)。

{
   "Result":"OK",
   "Record":[
      {
         "EventTypeID":1,
         "EventTypeName":"Quiz",
         "colourCode":"#FA5858",
         "isSystemEventType":false
      },
  {
     "EventTypeID":2,
     "EventTypeName":"Assignment",
     "colourCode":"#58FA58",
     "isSystemEventType":false
  },
  {
     "EventTypeID":3,
     "EventTypeName":"MidTerm",
     "colourCode":"#5858FA",
     "isSystemEventType":false
  },
  {
     "EventTypeID":4,
     "EventTypeName":"Exam",
     "colourCode":"#FA58F4",
     "isSystemEventType":false
  }
]
}

テーブルの初期化方法やデータの形式に問題はありますか?

4

2 に答える 2

1

jtable は大文字と小文字を区別すると見なされるため、列の名前が結果に記載されているものと正確に一致していることを確認してください。テーブルに間違った名前の列が 2 つあります。

<script type="text/javascript">
    $(document).ready(function () {
        $('#EventTypeTableContainer').jtable({
            title: 'Table of EventType',
            actions: {
                listAction: 'Admin/GetEventTypeList',
                createAction: 'Admin/CreateEventType',
                updateAction: 'Admin/UpdateEventType',
                deleteAction: 'Admin/DeleteEventType'
            },
            fields: {
                EventTypeID: {
                    key: true,
                    list: true
                },
                colourCode: {
                    title: 'Event Color',
                    width: '25%',
                    list: true
                },
                EventTypeName: {
                    title: 'Event Type',
                    width: '50%',
                    list: true
                },
                isSystemEventType: {
                    title: 'Modify/Delete',
                    width: '25%',
                    list: true,
                    create: false,
                    edit: true
                }
            }
        });
        $('#EventTypeTableContainer').jtable('load');
    });
</script>
于 2013-04-16T09:10:07.790 に答える