JS: использование edatagrid

У меня возникла проблема при использовании edatagrid. enter image description here Красная область - это select, желтая область - это *таблица *в edatagrid. Я хочу обновлять содержимое таблицы при изменении выбранного значения в select.

Я попытался отделить table от всей страницы. Когда я изменяю выбранное значение, отправляю ajax post запрос для получения новых данных. Но в результате стиль таблицы стал не таким, как раньше, а содержимое таблицы не обновляется. Например, enter image description here

Вот мой код.

Вся страница: test_plan.html

Табличная часть: test_plan_content.html

<div class="card-body" id="placeHolderContent">
    <table i`d="dg" title="测试用例"
                       toolbar="#toolbar" pagination="true" idField="id"
                       rownumbers="true" fitColumns="true" singleSelect="true" resizeHandle="both" style="padding:  0 4px !important;">
                        <thead>
                        <tr>
                            {% for item in items %}
                                <th field="{{item.nickname}}" width="auto" editor="{type:'validatebox'}">{{item.name}}</th>
                            {% endfor %}<br>
                        </tr>
                        </thead>
                    </table>
                    <div id="toolbar">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">新增一行记录</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">撤销</a>
                    </div>
</div>

код сервера: 

def test_plan(request):
    testplanId=request.GET.get('testplanId')
    testplans=Testplan.objects.all()
    if(testplanId):
        # return the selected one
        testplan = Testplan.objects.get(id=testplanId)
        testplanId = testplan.id
        items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
        return render(request, 'lab_management/test_management/test_plan_content.html',
                      { 'items': items})

    else:
        # return last one
        testplan=testplans.last()
        testplanId=testplan.id
        items = TestplanTableItems.objects.filter(Q(type=testplan.plan_type) | Q(type=0))
        return render(request, 'lab_management/test_management/test_plan.html',
                      {"testplans": testplans, 'items': items})

Как решить эту проблему? Заранее спасибо!

Вернуться на верх