datagrid的增加功能的实现

最新推荐文章于 2021-09-16 14:42:26 发布

weixin_30364147

最新推荐文章于 2021-09-16 14:42:26 发布

阅读量148

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GumpYan/p/7474529.html

版权

一、增加

1.行编辑状态所需的条件

（1）在columns中添加editor，注意type的设置

（2）调用beginEdit方法，开启行编辑

添加到第一行：

添加到最后一行：

（2）如果有一行开启了编辑状态，那么点击增加按钮，不能再增加一行编辑

问题：

解决方案：

（3）onAfterEdit

当点击保存按钮时，调用endEdit方法之后，就会自动触发调用onAfterEdit函数

（4）由于editor的type中没有datetimebox，因此需要进行扩展

扩展方法：

//扩展datetimebox，由于editors里面没有datetimebox，所以要进行扩展
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox: {
        init: function(container, options){
            var editor = $('<input />').appendTo(container);
            options.editable=false;  //在datetimebox 设置editable="false"，这样用户就不能填写时间，只能选择时间
            editor.datetimebox(options);
            return editor;
        },
        destroy: function(target){//结束编辑行的时候销毁datetimebox
            $(target).datetimebox('destroy');
        },
        getValue: function(target){
            return $(target).datetimebox('getValue');
        },
        setValue: function(target, value){
            $(target).datetimebox('setValue',value);
        },
        resize: function(target, width){
            $(target).datetimebox('resize',width);
        }
    }
});

（5）

解决方案：

（6）取消编辑

rejectChanges方法是没有参数的

代码：center.html

  <script charset=UTF-8">

$(function(){

//扩展datetimebox，由于editors里面没有datetimebox，所以要进行扩展
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox: {
        init: function(container, options){
            var editor = $('<input />').appendTo(container);
            options.editable=false;  //在datetimebox 设置editable="false"，这样用户就不能填写时间，只能选择时间
            editor.datetimebox(options);
            return editor;
        },
        destroy: function(target){//结束编辑行的时候销毁datetimebox
            $(target).datetimebox('destroy');
        },
        getValue: function(target){
            return $(target).datetimebox('getValue');
        },
        setValue: function(target, value){
            $(target).datetimebox('setValue',value);
        },
        resize: function(target, width){
            $(target).datetimebox('resize',width);
        }
    }
});


    var editRow=undefined;    //用editRow存储开启编辑状态行的索引
    var usersearchForm=$("#admin_user_searchForm").form();//获取表单元素的值
    
    var userDatagrid=$("#admin_user_datagrid").datagrid({    //给datagrid初始化
            url:'',
            title:'用户列表',
            iconCls:'icon-save',
            pagination:true,    //分页
            pagesize:10,    //每页有10行数据
            pageList:[10,20,30,40],    //注意这些数值是pagesize的倍数
            fit:true,
            fitColumns:false,  //false,表示不会出现横向滚动条；true,则表示能出现横向滚动条(列少的时候用)
            nowarp:false,  //当表格中某一行的一个列内容较多时，就会自动折行（换下一行显示）
            border:false,  //去掉datagrid的边框
            idField:'id',    //自动标记选中的行，换页后，前面所选中的行依然保留
            columns:[[
                {
                    title:'编号',
                    field:'id',
                    width:100,        //宽度一定要给出，不给出会报错
                    sortable:true,
                },{
                    title:'姓名',
                    field:'name',
                    width:100,
                    sortable:true,
                    editor:{
                        type:'validatebox',
                        options:{
                            required:true
                        }
                    }    
                },{
                    title:'密码',
                    field:'password',
                    width:100,
                    editor:{
                        type:'validatebox',
                        options:{
                            required:true
                        }
                    }        
                },{
                    title:'创建时间', 
                    field:'createdatetime',
                    width:200,
                    editor:{
                        type:'datetimebox',
                        options:{
                            required:true
                        }
                    }            
                },{
                    title:'最后修改时间',
                    field:'modifydatetime',
                    width:200,
                    editor:{
                        type:'datetimebox',
                        options:{
                            required:true
                        }
                    }            
                }
            
            ]],
            
        toolbar:[{
                text:'增加',
                iconCls:'icon-add',
                handler:function(){
                    if(editRow != undefined){//判断有没有一行处在编辑状态，点击增加按钮时候，要关闭它的行编辑状态，进行下一行的编辑状态
                        userDatagrid.datagrid('endEdit',editRow);
                    }
                    
                    if(editRow == undefined){//保持只有一行处在编辑状态，即==undefined的时候，才让其进行添加新的一行
                    //添加到第一行
                    userDatagrid.datagrid('insertRow',{
                        index:0,//插入在第一行，index是从0开始的
                        row:{
                            id:'123',
                            name:'请输入姓名',
                            password:'请输入密码'
                        }
                    });
                
                    userDatagrid.datagrid('beginEdit',0);//开启行编辑状态,index是从0开始的，从第0行开始编辑
                    editRow=0; //记录开启编辑行的索引
                    
                    }
                    
                }
            },'-',{
                text:'删除',
                iconCls:'icon-remove',
                handler:function(){
                 }
             },'-',{
                text:'修改',
                iconCls:'icon-edit',
                handler:function(){
                }
             },'-',{
                text:'保存',
                iconCls:'icon-save',
                handler:function(){
                userDatagrid.datagrid('endEdit',editRow);//点击保存按钮，调用endEdit方法之后，就会自动触发调用onAfterEdit函数
                }
              },'-',{
                text:'取消编辑',
                iconCls:'icon-redo',
                handler:function(){
                    editRow=undefined;
                    userDatagrid.datagrid('rejectChanges');    //rejectChanges回滚
                    userDatagrid.datagrid('unselectAll');    //取消选中当前页所有的行
                }
             },'-',
                ],
             
             onAfterEdit:function(rowIndex,rowData,changes){//关闭编辑状态,rowData是编辑行所对应的记录
                 console.info(rowData);
                 
                 editRow=undefined; //将editRow置空，让其恢复原来的状态，因为在点击增加的时候，editRow就不为空了
                 
                 //*****与后台交互的位置****
                 /* $.ajax(); success:function(rowData){}*/
                 
                 
             }
                 
        
        });
        
        $("#searchForm").click(function(){//查询
            userDatagrid.datagrid('load',serializeObject(usersearchForm));
        });
        
        $("#cleanForm").click(function(){
            userDatagrid.datagrid('load',{});//就是查询所有的内容了，相当于恢复到初始的界面
            usersearchForm.find('input').val('');//将input输入框里面的值清空了
        });
    
});
        
        function serializeObject(form){//将form表单元素的值序列化成对象
            var o={};
            $.each(form.serializeArray(),function(index){
                if(o[this['name']]){
                    o[this['name']]=o[this['name']]+","+this['value'];
                }else{
                    o[this['name']]=this['value'];
                }
            });
                return o;
        };
        

</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<div class="easyui-layout" fit="true" border="false">
    <div region="north" border="false" title="过滤" style="height:120px;overflow:hidden;">
        <form id="admin_user_searchForm">
            <table class="tableForm datagrid-toolbar" style="height:100%;width:100%">
                <tr>
                    <th>用户名：</th>
                    <td><input name="name" style="width:315px;"></td>
                </tr>
                <tr>
                    <th>创建时间：</th>
                    <td><input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"></td>
                </tr>
                <tr>
                    <th>最后修改时间：</th>
                    <td><input name="madifydatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="madifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;">
                    <a href="javascript:void(0);" class="easyui-linkbutton" id="searchForm">查询</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" id="cleanForm">清空</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div region="center" border="false">
    <table id="admin_user_datagrid"></table>
</div>
</div>