小楼看你 2019-07-31 17:38 采纳率: 0%
浏览 579
已结题

Easy UI DataGrid 的分页组件,显示异常?

初次进入情况
刷新页面后的情况
理论上正常的样子

不知道为啥分页组件全部挤在了右边这角落里面,强迫症已近哭晕在厕所
我是直接复制的理论上不存在问题,尝试了从easyui官网复制代码也是出问题,把那个页面在新窗口打开没有问题,

  • 写回答

2条回答 默认 最新

  • 小楼看你 2019-07-31 17:42
    关注

    第一个页面是打开时的显示(被遮盖和挤在右边)
    第二个页面是刷新后的显示(刷新后显示好了,不过还是整体挤在右边)
    第三个页面是我预想中显示的样子

    <div style="left: auto; width: 100%; height:513px">
        <table id="datagrid" class="easyui-datagrid" title="客户信息管理" data-options="onDblClickCell:onClickCell,iconCls: 'icon-edit',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'FCheck',width:40,align:'center',resizable:true,checkbox:true">复选框</th>
                    <th data-options="field:'FKey',width:80,align:'center',resizable:true ">编号</th>
                    <th data-options="field:'FBigModule',width:120,editor: 'text' ">大模块名称</th>
                    <th data-options="field:'FChildModule',width:200,editor: 'text' ">子模块名称</th>
                    <th data-options="field:'FMethod',width:320,editor: 'text' ">函数名称</th>
                    <th data-options="field:'FFullMethod',width:460,editor: 'text' ">接口名称</th>
                </tr>
            </thead>
        </table>
    </div>
    
    <div id="tb" style="padding: 10px; height: 40px">
        <div style="margin-bottom: 5px">
            <a href="#" onclick="add()" plain="true" class="easyui-linkbutton" iconcls="icon-add">添加</a>
            <a href="#" onclick="edit()" plain="true" class="easyui-linkbutton" iconcls="icon-edit">编辑</a>
            <a href="#" onclick="doDelete()" plain="true" class="easyui-linkbutton" iconcls="icon-cut">删除</a>
            <a href="javascript:void(0);" onclick="search()" plain="true" class="easyui-linkbutton" iconcls="icon-search">查询</a>
        </div>
    </div>
    
    <div>
        <div id="addDiv" class="easyui-window" title="添加操作弹框" data-options="resizable: true,maximizable: false,center: true,modal:true,closed:true,iconCls:'icon-save'" style="width: 60%; height: 95%; padding: 10px;">
            <form id="addForm" method="post">
                <table cellpadding="5" style="text-align: center; padding: 10px 60px 20px 60px" border="0">
                    <tr>
                        <td>大模块名称</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="FBigModule" data-options="required:true,maxlength:5" /></td>
    
                        <td>子模块名称</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="FChildModule" data-options="required:true" /></td>
    
                    </tr>
                    <tr>
                        <td>函数名称</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="FMethod" data-options="required:true,maxlength:5" /></td>
    
                        <td>接口名称</td>
                        <td>
                            <input class="easyui-textbox" type="text" name="FFullMethod" data-options="required:true" /></td>
    
                    </tr>
                </table>
    
    
            </form>
            <div style="text-align: center; padding: 5px">
                <a href="#" class="easyui-linkbutton" type="button" name="submit" onclick="submitForm()">提交 </a>
                <a href="#" class="easyui-linkbutton" type="button" name="clear" onclick="clearForm()">清除</a>
            </div>
    
        </div>
    
    </div>
    
    
    <script type="text/javascript">
        //表单列表 ,初始显示的数据路径来源,和属性设置
        $(function () {
            $('#datagrid').datagrid({   /*UI中的DataGrid组件可以在表中显示一组行数据.*/
                //提交地址
                url: '../../../Handler/Test/TestPlanHandler.ashx',//?action=query
                queryParams: { action: 'query' },//直接用这个传递参数过去后台页面不用?action=query
                fit: true,//自适应大小
                loadMsg: '加载中',//数据加载时提示内容
                pagination: true,//分页
                showFooter: true,//数据显示在最后一行
                singleSelect: true,//单选一行,不能多选复选,用于修改,删除行数据
                rownumbers: true,//在表格前面添加序列号。
                toolbar: '#tb',//设置表头菜单的所在div
                //url: "Series/QueryBy",  //调用的SeriesController中的QueryBy方法
                width: "100%",  //宽度适应浏览器大小
                //fitColumns: true,  //列宽自适应//列太多了缩在一起不好看
                idField: 'Fkey',
                loadMsg: '正在载入用户信息...',
                pagination: true,  //是否分页显示
                //singleSelect: false,  //true仅仅能选中一条数据,false可以多选,那个在后面那个生效
                striped: true,   //行背景交换
                pageSize: 10,    //每一页的大小
                pageNumber: 1,   //当前页数
                pageList: [10, 20, 30, 40, 50],  //每一页显示的条数
    
                onLoadSuccess: function (data) {
                    $(".datagrid-header-check").html("");//表头(header)的全选复选框(check box)为空,不显示因为我不复选只选单行,主要是为了删除选中的行
    
                }
    
            });
    
        })
    
        // 删除按钮的点击事件,只能选中一行,删除选中行
        function doDelete() {
    
            var rows = $('#datagrid').datagrid('getSelections');
    
            if (rows.length == 1) {
                $.messager.confirm('确认', '您确认删除编号为:' + rows[0].FKey + '&nbsp的记录吗?', function (r) {
                    if (r) {
                        var id = rows[0].FKey;
                        var urls = "../../../Handler/Test/TestPlanHandler.ashx?action=remove&FKey=" + id;
                        $.ajax({
                            type: "GET",
                            cache: false,
                            url: urls
                        })
                    }
    
                });
    
            }
            else {
                $.messager.alert('系统消息', '请选择<span style="color:red" >&nbsp壹&nbsp行&nbsp</span>进行删除');
            }
    
        }
    
        //查询按钮事件
        function search() { $.messager.alert('系统消息', ''); $('#datagrid').datagrid('reload'); }
    
        /** 添加按钮点击事件 */
        function add() { $('#addDiv').window('open'); }
    
        /** 添加数据弹窗提交按钮点击事件 */
        function submitForm() {
            $("#addForm").form('submit', {
                url: '../../../Handler/Test/TestPlanHandler.ashx?action=add'
    
            });
            $.messager.confirm('添加成功', '是否继续添加数据', function (r) {
                if (r) { $('#addForm').form('clear'); } else { $('#addDiv').dialog('close'); }
            });
        }
    
        /** 事件,清空表单文本框内容 */
        function clearForm() { $('#addForm').form('clear'); }
    
        /**修改按钮的点击事件 */
        function edit() {
            endEditing()
            var rows = $('#datagrid').datagrid('getSelections');
            if (rows.length == 1) {
                $.messager.confirm('确认', '您确修改除编号为:' + rows[0].FKey + '&nbsp的记录吗?', function (r) {
                    if (r) {
                        var data = rows[0];
                        var urls = "../../../Handler/Test/TestPlanHandler.ashx?action=edit&FKey=" + data.FKey;
                        $.ajax({
                            type: "GET",
                            cache: false,
                            url: urls,
                            data: {
                                'FBigModule': data.FBigModule,
                                'FChildModule': data.FChildModule,
                                'FMethod': data.FMethod,
                                'FFullMethod': data.FFullMethod,
    
                            },
                            dataType: 'json',
                        });
    
                    }
                });
    
            } else {
                $.messager.alert('系统消息', '请选择<span style="color:red" >&nbsp 1 &nbsp 行 &nbsp</span>进行修改');
            }
    
        }
    
        //方法扩展editCell;
        $.extend($.fn.datagrid.methods, {
            //两个参数
            // jq: 
            // param:对象,包含index 和 鼠标点击的列属性;
            //jq = [table#datagrid.easyui-datagrid, context: document, selector: "#datagrid"], param = Object {index: 1, field: "Data"}  选择的是Data列,
            editCell: function (jq, param) {
                //each() 遍历;
                return jq.each(function () {
                    //options:返回属性对象。 这个时候的this代表:jq;
                    var opts = $(this).datagrid('options');
                    //getColumnFields:返回列的字段,如果 frozen 设置为 true,则冻结列的字段被返回。
                    //concat:用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本
                    //与HTML的editor属性有关;能够编辑的列和不能编辑的列;
                    //fields的值,和上面HTML对应;
                    //Array[5]
                    //0: "ck"
                    //1: "DepartmentName"
                    //2: "Name"
                    //3: "Data"
                    //4: "remarks"
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    //下面for循环,设定列能够编辑。当不能编辑时,editor的值为undefined,能够编辑值为text;
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        //循环到的列,不等于鼠标点击的那一列时,设定列的editor的值为null;
                        if (fields[i] != param.field) {
                            col.editor = null;
                        }
                    }
                    //开始对一行进行编辑。param.index 为行号;对选中的一行进行编辑;
                    $(this).datagrid('beginEdit', param.index);
                    //for循环,设置col
                    for (var i = 0; i < fields.length; i++) {
                        //getColumnOption:返回指定列的选项。
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        //给列的editor属性赋值;text 或者其他;
                        col.editor = col.editor1;
                    }
                });
            }
        });
    
        //定义一个 行号遍历 赋值为undefined;
        var editIndex = undefined;
    
        // 结束编辑,该函数的返回值为Boolean;
        function endEditing() {
            if (editIndex == undefined) { return true }
            //验证指定的行,有效时返回 true。
            if ($('#datagrid').datagrid('validateRow', editIndex)) {
                //结束对一行进行编辑。
                $('#datagrid').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
    
        /**
         * 点击单元格事件
         * @param index 行值
         * @param field 列字段名
         */
        function onClickCell(index, field) {
    
            //endEditing 的返回值是boolean 值;当返回值为true的时候;
            if (endEditing()) {
                //选中一行,行索引从 0 开始。
                $('#datagrid').datagrid('selectRow', index)
                    //行值和字段内容 
                    .datagrid('editCell', { index: index, field: field });
                //选中的行值赋值给editIndex;
                editIndex = index;
            }
        }
    
    
    
    </script>
    

    评论

报告相同问题?

悬赏问题

  • ¥20 怎么在stm32门禁成品上增加记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app