jquery easyui利用DataGrid实现CRUD操作__index_datagrid_detailview_DataGrid_function_

当前位置: 编程技术>jquery

jquery easyui利用DataGrid实现CRUD操作

来源: 互联网发布时间：2014-10-08

本文导语: 在easyui中，DataGrid可以通过detailview实现行的展开和收缩，利用这个特性可以实现基本的CRUD操作。如下图：展开行时，动态加载表单并装载数据，保存或取消表单操作时再收缩行。首先，建立表格基本框架：代码示例...

在easyui中，DataGrid可以通过detailview实现行的展开和收缩，利用这个特性可以实现基本的CRUD操作。

如下图：

展开行时，动态加载表单并装载数据，保存或取消表单操作时再收缩行。
首先，建立表格基本框架：

代码示例:

            First Name
            Last Name
            Phone
            Email

以上代码把DataGrid和工具栏都建好了，不用再编写JS代码。

2，接着，应用detailview并加载表单数据：

代码示例:

$('#dg').datagrid({    

    view: detailview,    

    detailFormatter:function(index,row){    

        return '
';    

    },

    onExpandRow: function(index,row){    

        var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');    

        ddv.panel({    

            border:false,    

            cache:true,    

            href:'show_form.php?index='+index,    

            onLoad:function(){    

                $('#dg').datagrid('fixDetailRowHeight',index);    

                $('#dg').datagrid('selectRow',index);    

                $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);    

            }    

        });    

        $('#dg').datagrid('fixDetailRowHeight',index);    

    }    

});