Easyui Datagrid的增删改查

2017-03-15

本实例使用EasyUI创建表格，元素，窗口，以及各种请求。增加，修改，查询及其他知识基本涵盖完全。有用到js创建和html创建.

easyui datagrid的增删改查

1	<table style="width:100%;" id="datagrid"></table>

$(function(){
    $('#datagrid').datagrid({
        url : 'datagrid.json',
        method : 'post',
        rownumbers:true,//显示一个行号 并不是按id来的
        width :600,
        toolbar:"#tb",//工具栏
        idField : 'id',
        nowrap:true,//是否在一行显示所有数据 默认为true
        pagination:true,//添加分页条
        pageNumber : 1,
        pageSize:10,//设置分页时设置每页多少条。默认为10。
        pageList:[5,10,15],//设置分页时初始化条数选择大小。默认为[10,20,30,40,50]。
        title : '用户列表',
        striped: true,  //奇偶条显示不同的颜色
        iconCls : 'icon-search',//图标
        sortOrder : 'DESC',//排序方式
        remoteSort:true,//设置服务器对数据进行排序。默认为 true。
        align : 'center',
        loadMsg : '正在加载中...',//缓冲信息提示
        selectOnCheck:$(this).is(':checked'),//点击并勾选checkbox
        queryParams:{}//在请求远程数据的时候发送额外的参数。
        singleSelect:false,//只选择一行
        striped: true, //行背景交换
         //加载成功后，消除所有选项
        onLoadSuccess:function(){
           $('#search_table').datagrid('clearSelections');
        },
        //在载入远程数据产生错误的时候触发
        onLoadError: function(){
            alert('数据失败')
        },
        //更改easyui的默认自动传参数
        onBeforeLoad: function (params) {//发送加载数据的请求前触发
            params.pagesize = params.rows;//更改向后台自动的参数名称
            delete params.rows;
        },
        columns:[[
            {
                field : 'id',//对应后台字段值
                title : '编号',
                sortable : true,//列使用排序
                checkbox : true,//复选框
                resizable:false,//True 就允许此列被调整尺寸。
                width : 100
            },
            {
                field : 'user',
                title : '帐号',
                resizable:false,
                sortable : true,
                width : 100
            }
        ]],
        //在用户双击一行的时候触发
        onDblClickRow: function (rowIndex, rowData) {

        }
        //在用户点击一个单元格的时候触发
        onClickCell: function (rowIndex, rowData) {

       }
    });

    var a = {
       param: {}
     };
   //增加按钮
    $('#add').click(function(){
        a.param = 'add';
        $('.header_title').html('添加信息');
        $('#add_information').modal();//弹出模态框
    });

     //修改按钮
    $('#modify').click(function(){
        a.param = 'edit';
        $('.header_title').html('修改信息');
        //返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
        var rows  =  $('#box1').datagrid('getSelections');
        if(rows.length ==1){
            $('#add_information').modal();//弹出模态框
        }else{
            nomp.ui.msg('警告','请选择需要操作的数据','w')
        }
    });

    //dialog中的确定按钮
    $('#enter').click(function(){
        if(a.param =='add'){
           nomp.easyui.validate();//点击确定按钮启用表单验证
           //判断表单验证是否通过 通过为true
           var b = $('#from_').form('validate');
           if(b){
               $('#from_').form('submit',{
                   url:url,
                   //像后台提交多余参数 但是表单内的name会自动像后台传参
                   onSubmit: function(param){
                       param.like = $('#like').val();//多余参数
                       return $(this).form('enableValidation').form('validate');
                   },
                   beforeSend : function(){
                       //显示加载时的状态
                       $('#datagrid').datagrid('loading');
                   },
                    success:function(data){
                       $('#datagrid').datagrid('loaded');//载入完毕隐藏
                       $('#add_information').modal('hide');//关闭表单弹出框
                       $('#datagrid').datagrid('load');//刷新当前页
                    }
               }）
           }
        }else if(a.param =='edit){
           //返回所有被选中的行
            var row_val = $('#datagrid').datagrid('getSelected');
            $('#add_form').form('submit',{
                url:url,
                //像后台提交多余参数 但是表单内的name会自动像后台传参
                onSubmit: function(param){
                    return $(this).form('enableValidation').form('validate');
                },
                success:function(data){
                    $('#datagrid').datagrid('loaded');//载入完毕隐藏
                    $('#add_information').modal('hide');//关闭表单弹出框
                    $('#datagrid').datagrid('load');//刷新当前页
                    nomp.ui.msg('提示信息','修改成功！','s');
                },
                error:function(){

                }
            })
        }
        return false;
    });

    //删除
    $('#remove').click(function(){
        var row  =  $('#datagrid').datagrid('getSelections');
        if(row.length>0){
            $.messager.confirm('警告操作','你确定删除选择的信息吗?删除后不能恢复！',
                function(flag){
                    if(flag){
                        var ids = [];
                        //循环选中要删除的数据然后放到ids里面
                        for (var i = 0; i < row.length; i ++) {
                            ids.push(row[i].id);
                        }
                        $.ajax({
                            url:'1.php',
                            type:'POST',
                            data:{
                                ids :ids.join(',')//像后台传递参数
                            },
                            beforeSend : function(){
                                //删除时显示载入状态
                                $('#datagrid').datagrid('loading');
                            },
                            success : function(data){
                                $('#datagrid').datagrid('loaded');
                                $('#datagrid').datagrid('load');
                                //所有行取消选定
                                $('#datagrid').datagrid('unselectAll');
                                $.messager.show({
                                    width:300,
                                    title: '提示',
                                    msg:data+'用户被删除'
                                })
                            }
                        })
                    }
                })
        }else{
            $.messager.alert('提示信息','请选择你要进行操作的数据！','warning')
        }
    });

    //查询
    $('#search').click(function(){
       $('#datagrid').datagrid('load',{
           user : $('input[name="c_user"]').val(),
           data_f : $('input[name="date_from"]').val(),
           data_to : $('input[name="date_to"]').val()
       })
    })
});

查询的时候用form包裹上用serialize直接取所有的参数比较方便

<form  id="form-query" style="margin: 0px;">

</form>
 //查询
    $('#search').click(function(){
       var data = $("#form-query").form('serialize');
        $('#datagrid').datagrid('load',data)
    })