easyui-datagrid

发表于 2018-04-17 更新于 2020-05-03 分类于前端阅读次数：本文字数： 7.2k 阅读时长 ≈ 7 分钟

响应事件

$(document).ready(function () {
  ...
$('#dgDevices').datagrid(
       {
           onDblClickRow:function (index, row) {
               console.debug('dgDevices double click');
           }
       }
   )
 })

js清除全部数据

$('#dgMileageReport').datagrid('loadData', {"total":0,"rows":[]});

js追加数据

$('#dgMileageReport').datagrid('appendRow', {
                simid: simid,
                plate: plate,
                startDateReport: start,
                endDateReport:end,
                mileage:data['data']
            });
$('#dg').datagrid('loadData', {"total":0,"rows":[]});

关键点是要在动画效果结束后，在初始化 datagrid，否则没有长宽数值，内容不显示

<div class="modal fade " id="procurementRegModal" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog modal-lg animated">
  ...
    <table id="procurement_record"></table>
    ...

function openProcurementRegModal() {
  showDevRegForm();
  setTimeout(function () {
      $('#procurementRegModal').modal('show');

      //modal 动画结束后
      //模态对话框可见时触发
      $('#procurementRegModal').on('shown.bs.modal', function () {
          // 執行動畫結束後的動作...
          // 重新加載 datagrid
          jQuery('#procurement_record').datagrid({
              toolbar:'#tb',
              width:700,
              height:480,
              fit: true,
              fitColumns: true,
              nowrap: true,
              striped: true,
              collapsible:true,
              url:'',//@ TODO   請添加 URL
              remoteSort: true,
              checkOnSelect: true,
              idField:'id',
              rownumbers:true,
              pagination:false, 
              singleSelect:true,
              pageSize:5,
              // onClickRow: onClickAnaylisRow,
              pageList: [5,10,15,20,25,50,100],
              columns:[[
                  {title:'ck', field:'ck',checkbox:true, width:30},
                  {field:'name',title:'名称',width:100,height: 35},
                  {field:'author',title:'作者',width:50,height: 35},
                  {field:'type',title:'索书号',width:50,height: 35},
                  {field:'press',title:'出版社',width:50,height: 35},
                  {field:'publication',title:'出版时间',width:50,height: 35},
                  {field:'quantity',title:'数量',width:50,height: 35},
                  {field:'intro',title:'介绍',width:50,height: 35},
                  {field:'date',title:'上架时间',width:50,height: 35}
              ]]
          });
      });

  }, 230);
  backend_url = '/admin/api/v1.0/procurement';
  submitType = 'POST';
}

可编辑

http://www.jeasyui.net/extension/190.html

需要包含

<script src="{{url_for('static', filename='js/ext/jquery.edatagrid.js')}}"></script>

<table id="procurement_record" style="width:600px;height:200px"
    title="订单信息-图书明细"  singleSelect="true">
<thead>
    <tr>
        <th field="name" title="名称" width="100" editor="{type:'validatebox',options:{required:true}}">名称</th>
        <th field="author" title="作者" width="100" editor="text">作者</th>
        <th field="press" title="出版社" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">出版社</th>
        <th field="quantity" title="数量" width="100" align="right" editor="numberbox">数量</th>
    </tr>
</thead>
</table>


function openProcurementRegModal() {
    showDevRegForm();
    setTimeout(function () {
        $('#procurementRegModal').modal('show');

        //modal 动画结束后
        //模态对话框可见时触发
        $('#procurementRegModal').on('shown.bs.modal', function () {
            // 執行動畫結束後的動作...
            // 重新加載 datagrid 注意这里是  edatagrid ************
            jQuery('#procurement_record').edatagrid({
                toolbar:'#toolbarProcurementRecord',
                width:700,
                height:300,
                fit: true,
                fitColumns: true,
                nowrap: true,
                striped: true,
                collapsible:true,
                url:'',//@ TODO   請添加 URL
                saveUrl: '',
                updateUrl: '',
                destroyUrl: '',
                remoteSort: true,
                checkOnSelect: true,
                idField:'id',
                rownumbers:true,
                pagination:false,
                singleSelect:true,
                pageSize:5,
                // onClickRow: onClickAnaylisRow,
                pageList: [5,10,15,20,25,50,100],
                // columns:[[
                //     // 添加checkbox
                //     // {title:'ck', field:'ck',checkbox:true, width:30},
                //     {field:'name',title:'名称',width:100,height: 35},
                //     {field:'author',title:'作者',width:50,height: 35},
                //     {field:'press',title:'出版社',width:50,height: 35},
                //     {field:'quantity',title:'数量',width:50,height: 35},
                // ]]
            });
        });

    }, 230);
    backend_url = '/admin/api/v1.0/procurement';
    submitType = 'POST';
}

添加搜索

<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
        onclick="newBook()">新建部门</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
        onclick="editBook()">修改部门</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
        onclick="deleteBook()">删除部门</a>
    <span>名称:</span>
    <input id="name_search" style="line-height:26px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton mb-2" plain="true" onclick="doSearch()">Search</a>
</div>

function doSearch(){
    $('#dgBooks').datagrid('load',{
        name_search: $('#name_search').val(),
        phone_search: $('#phone_search').val()
    });
}

后台处理 get 请求。

@admin.route('/api/v1.0/users', methods=['GET'])
@login_required
def users():
    # jquery 表格接口
    page = request.values.get('page')
    rows = request.values.get('rows')
    if request.values.has_key('name_search'):
        name_search = request.values.get('name_search')
    if request.values.has_key('phone_search'):
        phone_search = request.values.get('phone_search')

遍历数据

var data=$('#dg').datagrid("getData"); // 获取所有数据

增加 checkbox

<table id="dgBooks" title="" class="easyui-datagrid" style=""
        url="/api/v1.0/borrowList" method="get"
        toolbar="#toolbar" pagination="true"
        rownumbers="true" fitColumns="true" singleSelect="false">
    <thead>
    <tr>
        <th field="ck" checkbox="true"></th>
        <th field="name" width="130">名称</th>
        <th field="author" width="80">作者</th>
        <th field="type" width="30">索书号</th>
        <th field="press" width="50">出版社</th>
        <th field="publication" width="40">出版时间</th>
        <th field="quantity" width="40">数量</th>
        <th field="intro" width="50">介绍</th>
        <th field="date" width="50">上架时间</th>
    </tr>
    </thead>
</table>