解决Layui滚动条的干扰与数据的监听工作
今天我想跟大家讲一下怎样运用layui 插件来完成表格渲染和监听。Layui这个插件最突出的设计就是在于它的表格。
我们常常会运用到layui来完成表格的渲染设置,但是在运用的时候要注意到一些问题。比如在这一次做项目中我就运用layui这个插件来完成表格渲染的功能。但是在这次表格渲染过程中我就遇到表格下面出现了滚动条。刚开始以为是受到我搭建页面时候,设置内外边距的影响。为此琢磨了好久,最后发现是layui 自身插件的问题。
表格渲染的时候,插件带来的问题。这种解决的办法就是在表格渲染配置完成的时候,给它设置宽度就可以。这样就不会出现烦人的滚动条了。当然这个 width 是不用带像素(PX)。同时这个值是不固定的,看你需要,自已去调配出适宜的宽度即可。
cols: [[ { title: ‘酒菜小类名称’, field: ‘LiquorSName’, align: ‘center’ },]]
width : 1519.2
});
在这次项目中,我还很大程度上运用到layui这个插件的监听功能。
图一 图二
大家可以对比一下图一和图二他们有什么不同。很明显图一的修改删除按钮是套在表格里面的,这种做法往往就会更加方便获取当前行数据的ID ,拼接参数即可。根据ID 去进行修改与删除操作即可
function SetOption(data) {
var btn = “”;
var AcademeID = data.AcademeID;//变量先声明
btn += “修改”
btn += “删除”
return btn;
}
但是,图二,修改删除按钮在外面,这种拼接的方法就运用不了了,这时候我们应该如何去获取它的ID并且运用ID去查询当行数据进行数据的回填呢?
这时候你就要运用到监听了。监听它当行的数据。
$("#openUpdate").click(function () {
var checkStatus = layuiTable.checkStatus(‘tabPageTable’); 即为渲染表格的ID,基础ID
var Data = checkStatus.data
if (Data[0] == null) {
return;
}
$.post("", { ID: Data[0].ID }, function (data) {
});
});
只有这样你才点击当行,获取当行的数据才可以把当行的ID 获取并传递到控制器。进行页面数据回填的操作。
好了今天的内容就这么多,没什么技术要点。希望对你有一丝丝的帮助。
- AngularJs中 URL地址参数改变,视图不更新的解决办法(监听URL变化,重新加载数据方法)
- 完美解决android监听联系人数据变化
- 在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度。
- glmis项目工作日志4_解决RecyclerView中使用CheckBox时出现数据错乱的问题。
- 简单的UDP监听需要打开w网路岗才能接收到数据的原因和解决办法
- 完美解决android监听联系人数据变化
- 工作问题 解决关于hibernate 更新数据的问题
- 【工作记录0013】easyui中datagrid绑定,后台可读出数据,前台未显示的解决方法
- 解决windows的数据访问保护(DEP)导致windows installer不能工作的问题
- 数据通信问题解决之后的工作
- 安卓探究ListView+Adapter数据在工作线程中更新引发的crash以及解决方法(二)
- C#串口CHART控件绘图时出现的数据干扰问题解决
- 完美解决android监听联系人数据变化
- easyui工作使用中的datagrid和ie兼容问题解决记录(二 :多个datagrid在ie下,有的数据会显示,有时不显示)
- 解决app 监听应用退出 需要数据还原问题(例如账户登陆状态的保持)
- 完美解决android监听联系人数据变化
- 使用强大的工具来解决前后台的协调配合,做到互不干扰对方的开发工作,只需要前后台都完工的情况合并代码就好了
- 解决windows的数据访问保护(DEP)导致windows installer不能工作的问题
- 请描述工作中解决的故障(写入数据出现 no space left on device 故障)
- namenode多个工作目录解决数据丢失问题