老项目,jq+ligerUi grid写的后台项目,现在需要借鉴Element-ui 等新框架,将表格的操作列固定在右侧。
ligri ui 文档: http://www.ligerui.com/api/index.htm
http://www.ligerui.com/demo.html
文档说的不清不楚。
实际操作:
var grid = $('#grid').ligerGrid({
columns: columns,
root: 'rows',
record: 'total',
checkbox: false,
});
var columns = [
{ display: 'ID', isSort: true, sortName: 'a.content_id', name: 'contentId', width: '4%', render: self.renderContentId },
{ display: '标题', isSort: false, name: 'title', width: '20%', render: self.renderTitle },
{ display: '固顶', isSort: true, sortName: 'a.top_level', name: 'topLevel', width: '6%', render: self.topLevelRender },
{ display: '操作', isSort: false,frozen:true, width: '20%',name: '', render: self.operationWatch }
];
第一步将操作列frozen:true
属性 ,这个时候操作列固定是在表格最左侧的。
第二部:
修改默认的表格样式:
.datagrid-view1 {
left: auto;
right: 0;
}
.datagrid-view2 {
left: 0;
right: auto;
}
具体的样式名查看代码。