关于easyui:MyBatisPlus代码生成器

代码生成器AutoGenerator 是 MyBatis-Plus 的代码生成器,通过 AutoGenerator 能够疾速生成 Entity、Mapper、Mapper XML、Service、Controller 等各个模块的代码,极大的晋升了开发效率。环境筹备创立一个employee表SET FOREIGN_KEY_CHECKS=0;DROP TABLE IF EXISTS employee;CREATE TABLE employee ( id bigint(20) NOT NULL COMMENT 'ID', name varchar(255) DEFAULT NULL COMMENT '用户名', gender varchar(255) DEFAULT NULL COMMENT '性别', version int(10) DEFAULT '1' COMMENT '乐观锁', deleted int(1) DEFAULT '0' COMMENT '逻辑删除', create_time timestamp NULL DEFAULT NULL COMMENT '创立工夫', update_time timestamp NULL DEFAULT NULL COMMENT '更新工夫', PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8; 复制代码 ...

January 3, 2023 · 2 min · jiezi

关于easyui:01商品查询业务逻辑的实现

这是一个表格,将来展示数据一行一行的标识。 UI框架-表格数据展示阐明外围:JS中须要什么数据,后端程序员就封装什么数据!! 门Demo大抵浏览浏览。 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>EasyUI-3-菜单按钮</title><script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script><script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script><script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" /><link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /><script type="text/javascript"> /*通过js创建表格 */ $(function(){ $("#table3").datagrid({ /*定义工具栏 */ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert("点击工具栏")} },'-',{ iconCls: 'icon-help', handler: function(){alert('帮忙工具栏')} },'-',{ iconCls: 'icon-save', handler: function(){alert('保留工具栏')} }], columns:[[ {field:'itemIds',checkbox:true}, {field:'itemId',title:'商品Id',width:100}, {field:'itemName',title:'商品名称',width:100}, {field:'itemDesc',title:'商品形容',width:100,align:'right'} ]], fitColumns:true, //主动适应 url:"datagrid_item.json", //申请数据的地址 method:"get", //提交形式 striped:true, //有条纹的行 nowrap:true, //进步加载性能 loadMsg:"正在加载", //加载数据时打印 pagination:true, //分页加载 rownumbers:true, //显示行号 //singleSelect:true, //只容许选中一行数据 }) })</script></head> <body> <h1>Easy-表格数据1</h1> <div> <table class="easyui-datagrid" style="width:400px;height:250px"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>name1</td> <td>2323</td> </tr> <tr> <td>002</td> <td>name2</td> <td>4612</td> </tr> <tr> <td>003</td> <td>name3</td> <td>4612</td> </tr> </tbody> </table> </div> <hr/> <h1>通过数据申请创建表格</h1> <div> 看到URL:属性 在背地解析时就是一个AJAX $.GET(XXXX) 定义表格,并且通过url拜访json数据, fitColumns:true示意主动适应,singleSelect:true 示意选中单个 <table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get', fitColumns:true,singleSelect:false,pagination:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table> </div> <hr/> <h1>通过js创建表格</h1> <table id="table3" style="width:700px"> </table> </body></html>次要代码局部截图: ...

November 6, 2020 · 1 min · jiezi

关于easyui:easyuidatagrid的分页功能

easyui-datagrid的分页性能 1.table pagination为true时,会显示分页栏。easyui中的数据表格须要接管 两个参数 total:数据总数 rows:数据// 相似这种模式 { "total":2000, "rows":[ {"code":"A","name":"果汁","price":"20"}, {"code":"B","name":"汉堡","price":"30"}, {"code":"C","name":"鸡柳","price":"40"}, {"code":"D","name":"可乐","price":"50"}, {"code":"E","name":"薯条","price":"10"}, {"code":"F","name":"麦旋风","price":"20"}, {"code":"G","name":"套餐","price":"100"} ]}<table class="easyui-datagrid" id="itemList" title="商品列表" data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:10,toolbar:toolbar"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'id',width:60">商品ID</th> <th data-options="field:'title',width:200">商品题目</th> <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th> <th data-options="field:'sellPoint',width:100">卖点</th> <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th> <th data-options="field:'num',width:70,align:'right'">库存数量</th> <th data-options="field:'barcode',width:100">条形码</th> <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th> <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创立日期</th> <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th> </tr> </thead></table>2.查找业务实现2.1封装商品数据和页面数据@JsonIgnoreProperties(ignoreUnknown=true) //示意JSON转化时疏忽未知属性@TableName("tb_item")@Data@Accessors(chain=true)public class Item extends BasePojo{ @TableId(type=IdType.AUTO) private Long id; //商品id private String title; //商品题目 private String sellPoint; //商品卖点信息 private Long price; //商品价格 Long > dubbo private Integer num; //商品数量 private String barcode; //条形码 private String image; //商品图片信息 1.jpg,2.jpg,3.jpg private Long cid; //示意商品的分类id private Integer status; //1失常,2下架 //为了满足页面调用需要,增加get办法 public String[] getImages(){ return image.split(","); }}/** * @Author WL * @Date 2020-9-25 17:31 * @Version 1.0 */@AllArgsConstructor@NoArgsConstructor@Data@Accessors(chain = true)public class PageItem<T> implements Serializable { private Long total; private List<Item> rows;2.2长久层Mapperpublic interface ItemMapper extends BaseMapper<Item>{ @Select("select * from tb_item limit #{page},#{rows}") List<Item> findAll(Integer page, Integer rows);}2.3业务层public interface ItemService { PageItem<Item> findAll(Integer page, Integer rows); }@Servicepublic class ItemServiceImpl implements ItemService { @Autowired private ItemMapper itemMapper; @Override public PageItem<Item> findAll(Integer page,Integer rows) { List<Item> list = itemMapper.findAll(page, rows); long total = itemMapper.selectCount(null); PageItem<Item> pageItem = new PageItem<Item>(); pageItem.setTotal(total); pageItem.setRows(list); return pageItem; }}2.4 管制层@Controller@RequestMapping("/item/")public class ItemController { @Autowired private ItemService itemService; @ResponseBody @GetMapping("query") public PageItem<Item> doFindAll(HttpServletRequest request){ // 从request申请中获取页码数据 // easyUI在启用分页时,会额定的发送两个参数 page:以后页码 rows:每页显示行数 名字固定 int page = Integer.parseInt(request.getParameter("page")); int rows = Integer.parseInt(request.getParameter("rows")); PageItem<Item> all = itemService.findAll(page,rows); return all; }}总结应用easyui-datagrid分页时,须要依据page和rows搜寻当前页信息,所以须要接管客户端传来的页码信息因而写sql语句时要留神应用limit,另外从request获得的page和rows是String类型的,须要应用Integer.parseInt转换为int类型。

September 26, 2020 · 2 min · jiezi

关于easyui:easyUI-datagrid实现前台表单数据转json发送后台请求加载

问题引出easyUI的datagrid容许应用load办法,通过这样的形式向后盾发送数据: $('#dg').datagrid('load',{ code: '01', name: 'name01'});问题来了,很多状况下,列表页上搜寻框通常会有很多搜寻条件,如果这样一个个条件的拼键值对,费时费力,那么有什么办法来疾速把搜寻条件批量转成json吗?答案是有的! 解决方案间接上代码:JS代码: /*****************搜寻数据****************************/ $(function () { $("#searchBtn").click(function () { const serializeArr = $('#fm1').serializeObject(); $('#dg').datagrid('load', serializeArr); }); })表单批量转json对象办法: /** * 主动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; };

September 14, 2020 · 1 min · jiezi