If not, use the code generator to generate a set of addition, deletion, modification and query (2)

If the code generator is used to generate a set of addition, deletion, modification, and query according to the principle of separation （2）

new table Write the corresponding notes

View the document by
Create tables according to format requirements

The default configuration
Single application in resources In the catalog application.yml, Multiple modules ruoyi-generator Medium resources In the catalog generator.yml, You can adjust the default configuration according to the actual situation .

#  Code generation 
gen: 
  #  Developer name , Generated on class comments 
  author: ruoyi
  #  Default build package path  system  You need to change it to your own module name   Such as  system monitor tool
  packageName: com.ruoyi.system
  #  Automatically remove table prefixes , The default is false
  autoRemovePre: false
  #  Table prefix （ The generated class name does not contain a table prefix , Multiple separated by commas ）
  tablePrefix: sys_

Next, click Import

So the table information is added These two watches If we can generate code according to these two tables

So the code is generated But drag it into the current project

Then we analyze the code generation

When I click on an item

Will be generated Controller Go to

First of all, it will come to system/goods/goods Next

 @RequiresPermissions("system:goods:view")
    @GetMapping()
    public String goods()
    {
    
        return prefix + "/goods";
    }

Let's take a look at this page

Found something initialized , These things are just written in the database notes

 //$ The method defined in    These methods are in dom When the （ Defined some content ）
        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: " goods ",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'goodsName',
                    title: ' Name of commodity '
                },
                {
                    field: 'goodsPrice',
                    title: ' commodity price '
                },
                {
                    field: 'gmtCreate',
                    title: ' Date of creation '
                },
                {
                    title: ' operation ',
                    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> edit </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> Delete </a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

Let's go and have a look at the last sentence init What did you do

$.table.init(options);

Click on operate or table Get into ry-ui.js
We found that goods.html page Called $.operate.removeAll()
It's actually ry-ui.js Sealed in
I fold it up and see it clearly

So let's summarize

goods.html Page access

$.table.init(options);

stay ry-ui.js Another default parameter setting is made

//  Initialize table parameters 
            init: function(options) {
    
                var defaults = {
    
                    id: "bootstrap-table",
                    type: 0, // 0  representative bootstrapTable 1 representative 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,
                };

These two sentences are the data parameters to be passed in Combine with the default parameters to generate a options

 var options = $.extend(defaults, options);
 table.options = options;
 table.config[options.id] = options;

What are you doing with me ？

Continue to look at options.id How did you get it ？ What will you do after you get it ？

When you get it, you render the table

   <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>

$('#' + options.id).bootstrapTable({
    
                    id: options.id,
                    url: options.url,                                   //  Request background URL（*）
                    contentType: "application/x-www-form-urlencoded",   //  The encoding type 
                    method: options.method,                             //  Request mode （*）
                    cache: false,                                       //  Whether to use cache 
                    height: options.height,                             //  Table height 
                    striped: options.striped,                           //  Whether to display the color separation between lines 
                    sortable: true,                                     //  Whether to enable sorting 
                    sortStable: true,                                   //  Set to  true  A stable ranking will be obtained 
                    sortName: options.sortName,                         //  Sort column name 
                    sortOrder: options.sortOrder,                       //  sort order  asc  perhaps  desc
                    pagination: options.pagination,                     //  Display paging or not （*）
                    paginationLoop: options.paginationLoop,             //  Whether to enable the function of infinite loop of paging bar 
                    pageNumber: 1,                                      //  Initialize load first page , Default first page 
                    pageSize: options.pageSize,                         //  Record lines per page （*） 
                    pageList: options.pageList,                         //  Number of lines per page to choose from （*）
                    firstLoad: options.firstLoad,                       //  Whether to request loading data for the first time , For large data, you can configure false
                    escape: options.escape,                             //  escape HTML character string 
                    showFooter: options.showFooter,                     //  Whether to display footer 
                    iconSize: 'outline',                                //  Icon size ：undefined Default button size  xs Super small button sm Small button lg Big buttons 
                    toolbar: '#' + options.toolbar,                     //  Specify the work bar 
                    loadingFontSize: options.loadingFontSize,           //  Customize the font size of the loaded text 
                    sidePagination: options.sidePagination,             // server Enable server paging client Client paging 
                    search: options.search,                             //  Whether to display the search box function 
                    searchText: options.searchText,                     //  What is initially displayed in the search box , The default is empty. 
                    showSearch: options.showSearch,                     //  Whether to display retrieval information 
                    showPageGo: options.showPageGo,                     //  Whether to display jump page 
                    showRefresh: options.showRefresh,                   //  Whether to display the refresh button 
                    showColumns: options.showColumns,                   //  Whether to show or hide a column drop-down box 
                    showToggle: options.showToggle,                     //  Whether to display the toggle button of detail view and list view 
                    showExport: options.showExport,                     //  Whether it supports exporting files 
                    showPrint: options.showPrint,                       //  Whether it supports printing pages 
                    showHeader: options.showHeader,                     //  Whether to display the header 
                    showFullscreen: options.showFullscreen,             //  Show full screen button or not 
                    uniqueId: options.uniqueId,                         //  Unique identifier 
                    clickToSelect: options.clickToSelect,               //  Enable Click to select the middle line 
                    singleSelect: options.singleSelect,                 //  Whether or not the radio checkbox
                    mobileResponsive: options.mobileResponsive,         //  Whether mobile terminal adaptation is supported 
                    cardView: options.cardView,                         //  Whether to enable display card view 
                    detailView: options.detailView,                     //  Enable display detail view 
                    onCheck: options.onCheck,                           //  Trigger when this row is selected 
                    onUncheck: options.onUncheck,                       //  Trigger when this line is cancelled 
                    onCheckAll: options.onCheckAll,                     //  Trigger when all rows are selected 
                    onUncheckAll: options.onUncheckAll,                 //  Triggered when all rows are deselected 
                    onClickRow: options.onClickRow,                     //  The event triggered by clicking a line 
                    onDblClickRow: options.onDblClickRow,               //  The event triggered by double clicking a row 
                    onClickCell: options.onClickCell,                   //  Event triggered by clicking on a grid 
                    onDblClickCell: options.onDblClickCell,             //  Double click the event triggered by a grid 
                    onEditableSave: options.onEditableSave,             //  In line editing saved Events 
                    onExpandRow: options.onExpandRow,                   //  Click the event in the detail view 
                    onPostBody: options.onPostBody,                     //  Event executed after rendering is complete 
                    maintainSelected: options.maintainSelected,         //  Keep the selected line when the front page turns 
                    rememberSelected: options.rememberSelected,         //  Turn on page flipping and remember the previous selection 
                    fixedColumns: options.fixedColumns,                 //  Whether to enable frozen Columns （ left ）
                    fixedNumber: options.fixedNumber,                   //  Number of columns frozen （ left ）
                    fixedRightNumber: options.fixedRightNumber,         //  Number of columns frozen （ On the right side ）
                    onReorderRow: options.onReorderRow,                 //  When the drag is over, the processing function 
                    queryParams: options.queryParams,                   //  Pass parameters （*）
                    rowStyle: options.rowStyle,                         //  Set the line style through the custom function 
                    footerStyle: options.footerStyle,                   //  Set footer style through custom function 
                    headerStyle: options.headerStyle,                   //  Set the title style through the custom function 
                    columns: options.columns,                           //  Display column information （*）
                    data: options.data,                                 //  Loaded data 
                    responseHandler: $.table.responseHandler,           //  Before loading the data sent by the server, the processing function 
                    onLoadSuccess: $.table.onLoadSuccess,               //  When all data is loaded, the processing function is triggered 
                    exportOptions: options.exportOptions,               //  Front end export ignores column indexes 
                    exportDataType: options.exportDataType,             //  Export mode （ Default all： Export all data ;basic： Export the data of the current page ;selected： Export the selected data ）
                    exportTypes: options.exportTypes,                   //  Export file type  （json、xml、png、csv、txt、sql、doc、excel、xlsx、powerpoint、pdf）
                    printPageBuilder: options.printPageBuilder,         //  Custom print page template 
                    detailFormatter: options.detailFormatter,           //  Show a list of other data below the line 
                });

options.id How did you get it ？ No, id Properties

stay ry-ui.js Medium defaults There is id attribute Just in time with table Of id Corresponding upper

Add an event to try
stay bootstrap-table Find an event in
Find out ry-ui.js Already written
stay good.html Tianjia event function

Log in again to test

Get the data of this line

summary
The event is written in options Inside （ Configuration item ）
The table options are also written in options
List options are written in the line raw

No arguments

Modify how the page pops up ？

Find the modify tab and click edit()

 <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:goods:edit">
                    <i class="fa fa-edit"></i>  modify 
                </a>

Get into ry-ui.js after

 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(" Please select at least one record ");
                        return;
                    }
                    var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
                    $.modal.open(" modify " + table.options.modalName, url);
                } else {
    
                    $.modal.open(" modify " + table.options.modalName, $.operate.editUrl(id));
                }
            },

This uniqueId It doesn't matter if I can't find out what's going on for a long time

                    var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);

After debugging, I found that I didn't go to the top uniqueId
It's gone

                    $.modal.open(" modify " + 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(" Please select at least one record ");
                        return;
                    }
                    var url = table.options.updateUrl.replace("{id}", row[table.options.uniqueId]);
                    $.modal.open(" modify " + table.options.modalName, url);
                } else {
    
                    $.modal.open(" modify " + table.options.modalName, $.operate.editUrl(id));
                }
            },

Click in editUrl have a look

      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(" Please select at least one record ");
                        return;
                    }
                    url = table.options.updateUrl.replace("{id}", id);
                }
                return url;
            },

Click in selectFirstColumns() Methods we found that we got what we wanted here id

return $.common.getItemField(row, table.options.columns[1].field);

//  Query the value of the first column of the table deDuplication（ true duplicate removal 、false No weight removal ）
            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;
            },

Secondary packaging paging

/** *  Query product list  */
    @RequiresPermissions("system:goods:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(ErpGoods erpGoods)
    {
    
        startPage();
        List<ErpGoods> list = erpGoodsService.selectErpGoodsList(erpGoods);
        return getDataTable(list);
    }

Click on startPage(); How to get in

 /** *  Set request paging data  */
    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());
            // Here it is mybatis The paging plug-in of 
            PageHelper.startPage(pageNum, pageSize, orderBy);
        }
    }

that PageDomain pageDomain = TableSupport.buildPageRequest(); How is it carried out
Click in

public static PageDomain buildPageRequest()
    {
    
        return getPageDomain();
    }

Point again

 /** *  Encapsulate paging objects  */
    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;
    }

Click another layer to see

 /** *  obtain Integer Parameters  */
    public static Integer getParameterToInt(String name)
    {
    
        return Convert.toInt(getRequest().getParameter(name));
    }