若依不分离利用代码生成器生成一套增删改查（2）
新建表 把对应的注释写上
查看若依文档
根据格式要求创建表
默认配置
单应用在resources目录下的application.yml，多模块ruoyi-generator中的resources目录下的generator.yml，可以自己根据实际情况调整默认配置。
# 代码生成
gen:
# 开发者姓名，生成到类注释上
author: ruoyi
# 默认生成包路径 system 需改成自己的模块名称 如 system monitor tool
packageName: com.ruoyi.system
# 自动去除表前缀，默认是false
autoRemovePre: false
# 表前缀（生成类名不会包含表前缀，多个用逗号分隔）
tablePrefix: sys_
接下来点击导入
这样表信息就被加入 这两个表 若依会根据这两个表去生成代码
这样代码就生成了 不过要自己拖到当前项目中来
接着我们分析一下这个代码生成
当我点击商品时
会到生成的Controller去
首先会来到 system/goods/goods 下
@RequiresPermissions("system:goods:view")
@GetMapping()
public String goods()
{
return prefix + "/goods";
}
我们来这个页面看一看
发现初始化了一些东西，这些东西是数据库注释里刚写的
//$中定义的方法 这些方法在dom时执行（定义了一些内容）
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "商品",
columns: [{
checkbox: true
},
{
field: 'id',
title: 'id',
visible: false
},
{
field: 'goodsName',
title: '商品名称'
},
{
field: 'goodsPrice',
title: '商品价格'
},
{
field: 'gmtCreate',
title: '创建日期'
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
看到最后一句我们去看看 init干了什么
$.table.init(options);
点击 operate 或 table 进入 ry-ui.js
我们发现goods.html页面 调用的 $.operate.removeAll()
其实是ry-ui.js 里封装好的
我折起来看着清楚
这样我们总结一下
goods.html页面进入
$.table.init(options);
在ry-ui.js又做了一个默认的参数设置
// 初始化表格参数
init: function(options) {
var defaults = {
id: "bootstrap-table",
type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTable
method: 'post',
height: undefined,
sidePagination: "server",
sortName: undefined,
sortOrder: "asc",
pagination: true,
paginationLoop: false,
pageSize: 10,
pageNumber: 1,
pageList: [10, 25, 50],
toolbar: "toolbar",
loadingFontSize: 13,
striped: false,
escape: false,
firstLoad: true,
showFooter: false,
search: false,
showSearch: true,
showPageGo: false,
showRefresh: true,
showColumns: true,
showToggle: true,
showExport: false,
showPrint: false,
exportDataType: 'all',
exportTypes: ['csv', 'txt', 'doc', 'excel'],
clickToSelect: false,
singleSelect: false,
mobileResponsive: true,
maintainSelected: false,
rememberSelected: false,
fixedColumns: false,
fixedNumber: 0,
fixedRightNumber: 0,
queryParams: $.table.queryParams,
rowStyle: undefined,
};
这两句是将传进来的数据参数 与默认的参数进行组合最后生成一个 options
var options = $.extend(defaults, options);
table.options = options;
table.config[options.id] = options;
和并起来要干嘛呢？
继续看 options.id是怎么拿到的呢？拿到后干什么呢？
拿到后是给表格渲染
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
$('#' + options.id).bootstrapTable({
id: options.id,
url: options.url, // 请求后台的URL（*）
contentType: "application/x-www-form-urlencoded", // 编码类型
method: options.method, // 请求方式（*）
cache: false, // 是否使用缓存
height: options.height, // 表格的高度
striped: options.striped, // 是否显示行间隔色
sortable: true, // 是否启用排序
sortStable: true, // 设置为 true 将获得稳定的排序
sortName: options.sortName, // 排序列名称
sortOrder: options.sortOrder, // 排序方式 asc 或者 desc
pagination: options.pagination, // 是否显示分页（*）
paginationLoop: options.paginationLoop, // 是否启用分页条无限循环的功能
pageNumber: 1, // 初始化加载第一页，默认第一页
pageSize: options.pageSize, // 每页的记录行数（*）
pageList: options.pageList, // 可供选择的每页的行数（*）
firstLoad: options.firstLoad, // 是否首次请求加载数据，对于数据较大可以配置false
escape: options.escape, // 转义HTML字符串
showFooter: options.showFooter, // 是否显示表尾
iconSize: 'outline', // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
toolbar: '#' + options.toolbar, // 指定工作栏
loadingFontSize: options.loadingFontSize, // 自定义加载文本的字体大小
sidePagination: options.sidePagination, // server启用服务端分页client客户端分页
search: options.search, // 是否显示搜索框功能
searchText: options.searchText, // 搜索框初始显示的内容，默认为空
showSearch: options.showSearch, // 是否显示检索信息
showPageGo: options.showPageGo, // 是否显示跳转页
showRefresh: options.showRefresh, // 是否显示刷新按钮
showColumns: options.showColumns, // 是否显示隐藏某列下拉框
showToggle: options.showToggle, // 是否显示详细视图和列表视图的切换按钮
showExport: options.showExport, // 是否支持导出文件
showPrint: options.showPrint, // 是否支持打印页面
showHeader: options.showHeader, // 是否显示表头
showFullscreen: options.showFullscreen, // 是否显示全屏按钮
uniqueId: options.uniqueId, // 唯一的标识符
clickToSelect: options.clickToSelect, // 是否启用点击选中行
singleSelect: options.singleSelect, // 是否单选checkbox
mobileResponsive: options.mobileResponsive, // 是否支持移动端适配
cardView: options.cardView, // 是否启用显示卡片视图
detailView: options.detailView, // 是否启用显示细节视图
onCheck: options.onCheck, // 当选择此行时触发
onUncheck: options.onUncheck, // 当取消此行时触发
onCheckAll: options.onCheckAll, // 当全选行时触发
onUncheckAll: options.onUncheckAll, // 当取消全选行时触发
onClickRow: options.onClickRow, // 点击某行触发的事件
onDblClickRow: options.onDblClickRow, // 双击某行触发的事件
onClickCell: options.onClickCell, // 单击某格触发的事件
onDblClickCell: options.onDblClickCell, // 双击某格触发的事件
onEditableSave: options.onEditableSave, // 行内编辑保存的事件
onExpandRow: options.onExpandRow, // 点击详细视图的事件
onPostBody: options.onPostBody, // 渲染完成后执行的事件
maintainSelected: options.maintainSelected, // 前端翻页时保留所选行
rememberSelected: options.rememberSelected, // 启用翻页记住前面的选择
fixedColumns: options.fixedColumns, // 是否启用冻结列（左侧）
fixedNumber: options.fixedNumber, // 列冻结的个数（左侧）
fixedRightNumber: options.fixedRightNumber, // 列冻结的个数（右侧）
onReorderRow: options.onReorderRow, // 当拖拽结束后处理函数
queryParams: options.queryParams, // 传递参数（*）
rowStyle: options.rowStyle, // 通过自定义函数设置行样式
footerStyle: options.footerStyle, // 通过自定义函数设置页脚样式
headerStyle: options.headerStyle, // 通过自定义函数设置标题样式
columns: options.columns, // 显示列信息（*）
data: options.data, // 被加载的数据
responseHandler: $.table.responseHandler, // 在加载服务器发送来的数据之前处理函数
onLoadSuccess: $.table.onLoadSuccess, // 当所有数据被加载时触发处理函数
exportOptions: options.exportOptions, // 前端导出忽略列索引
exportDataType: options.exportDataType, // 导出方式（默认all：导出所有数据；basic：导出当前页的数据；selected：导出选中的数据）
exportTypes: options.exportTypes, // 导出文件类型 （json、xml、png、csv、txt、sql、doc、excel、xlsx、powerpoint、pdf）
printPageBuilder: options.printPageBuilder, // 自定义打印页面模板
detailFormatter: options.detailFormatter, // 在行下面展示其他数据列表
});
options.id是怎么拿到的呢？没有id属性啊
在ry-ui.js中的defaults中有id属性 刚好和 table的id对应上
添加一个事件试一试
在bootstrap-table中找一个事件
发现ry-ui.js已经写有了
在good.html天加事件函数
重新登录测试
拿到该行的数据
总结
事件是写在options里的（配置项）
表格选项也是写在options
列表选项是写在行里边 raw
无参
修改页面是怎么弹出来的？
找到修改标签点击 edit()
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:goods:edit">
<i class="fa fa-edit"></i> 修改
</a>
进入ry-ui.js后
edit: function(id) {
table.set();
if($.common.isEmpty(id) && table.options.type == table_type.bootstrapTreeTable) {
var row = $("#" + table.options.id).bootstrapTreeTable('getSelections')[0];
if ($.common.isEmpty(row)) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
$.modal.open("修改" + table.options.modalName, url);
} else {
$.modal.open("修改" + table.options.modalName, $.operate.editUrl(id));
}
},
这个uniqueId 半天找不到怎么回事没关系继续往下看
var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
调试后发现没走上边的 uniqueId
而是走了
$.modal.open("修改" + table.options.modalName, $.operate.editUrl(id));
edit: function(id) {
table.set();
if($.common.isEmpty(id) && table.options.type == table_type.bootstrapTreeTable) {
var row = $("#" + table.options.id).bootstrapTreeTable('getSelections')[0];
if ($.common.isEmpty(row)) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
$.modal.open("修改" + table.options.modalName, url);
} else {
$.modal.open("修改" + table.options.modalName, $.operate.editUrl(id));
}
},
点进 editUrl 看看
editUrl: function(id) {
var url = "/404.html";
if ($.common.isNotEmpty(id)) {
url = table.options.updateUrl.replace("{id}", id);
} else {
var id = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
if (id.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
url = table.options.updateUrl.replace("{id}", id);
}
return url;
},
在点进selectFirstColumns() 方法我们发现在这里得到了想要的id
return $.common.getItemField(row, table.options.columns[1].field);
// 查询表格首列值deDuplication（ true去重、false不去重）
selectFirstColumns: function(deDuplication) {
var distinct = $.common.isEmpty(deDuplication) ? true : deDuplication;
var rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), function (row) {
return $.common.getItemField(row, table.options.columns[1].field);
});
if ($.common.isNotEmpty(table.options.rememberSelected) && table.options.rememberSelected) {
var selectedRows = table.rememberSelecteds[table.options.id];
if($.common.isNotEmpty(selectedRows)) {
rows = $.map(selectedRows, function (row) {
return $.common.getItemField(row, table.options.columns[1].field);
});
}
}
return distinct ? $.common.uniqueFn(rows) : rows;
},
二次封装分页
/**
* 查询商品列表
*/
@RequiresPermissions("system:goods:list")
@PostMapping("/list")
@ResponseBody
public TableDataInfo list(ErpGoods erpGoods)
{
startPage();
List<ErpGoods> list = erpGoodsService.selectErpGoodsList(erpGoods);
return getDataTable(list);
}
点击 startPage(); 进入方法
/**
* 设置请求分页数据
*/
protected void startPage()
{
PageDomain pageDomain = TableSupport.buildPageRequest();
Integer pageNum = pageDomain.getPageNum();
Integer pageSize = pageDomain.getPageSize();
if (StringUtils.isNotNull(pageNum) && StringUtils.isNotNull(pageSize))
{
String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());
//这里还是mybatis的分页插件进行了封装
PageHelper.startPage(pageNum, pageSize, orderBy);
}
}
那么PageDomain pageDomain = TableSupport.buildPageRequest();是怎么执行的呢
点进去
public static PageDomain buildPageRequest()
{
return getPageDomain();
}
再点
/**
* 封装分页对象
*/
public static PageDomain getPageDomain()
{
PageDomain pageDomain = new PageDomain();
pageDomain.setPageNum(ServletUtils.getParameterToInt(Constants.PAGE_NUM));
pageDomain.setPageSize(ServletUtils.getParameterToInt(Constants.PAGE_SIZE));
pageDomain.setOrderByColumn(ServletUtils.getParameter(Constants.ORDER_BY_COLUMN));
pageDomain.setIsAsc(ServletUtils.getParameter(Constants.IS_ASC));
return pageDomain;
}
再点一层既可以看到了
/**
* 获取Integer参数
*/
public static Integer getParameterToInt(String name)
{
return Convert.toInt(getRequest().getParameter(name));
}
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
