不知道为啥分页组件全部挤在了右边这角落里面,强迫症已近哭晕在厕所
我是直接复制的理论上不存在问题,尝试了从easyui官网复制代码也是出问题,把那个页面在新窗口打开没有问题,
Easy UI DataGrid 的分页组件,显示异常?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
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 + ' 的记录吗?', 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" > 壹 行 </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 + ' 的记录吗?', 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" >  1   行  </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>
解决 无用评论 打赏 举报
悬赏问题
- ¥15 MapReduce结果输出到HBase,一直连接不上MySQL
- ¥15 扩散模型sd.webui使用时报错“Nonetype”
- ¥15 stm32流水灯+呼吸灯+外部中断按键
- ¥15 将二维数组,按照假设的规定,如0/1/0 == "4",把对应列位置写成一个字符并打印输出该字符
- ¥15 NX MCD仿真与博途通讯不了啥情况
- ¥15 win11家庭中文版安装docker遇到Hyper-V启用失败解决办法整理
- ¥15 gradio的web端页面格式不对的问题
- ¥15 求大家看看Nonce如何配置
- ¥15 Matlab怎么求解含参的二重积分?
- ¥15 苹果手机突然连不上wifi了?