关于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

easyui messager中的内容不能自适应大小问题处理

项目中发现一个问题,easyui下面的 messager下面的组件不能根据消息内容自适应宽高,正常情况下应该是内容超过弹框时可以自动出现滚动条的,但经过测试 1.4.1 1.4.2是直接把内容截断了,试了几个其他版本 1.3.1、1.4.5、1.7.1都没有这个问题,不能升级组件,只能修改css样式。修改easyui.css,大概在2248行.messager-body { padding: 10px; overflow: hidden;}为.messager-body { padding: 10px; /overflow: hidden;/}修改前效果:修改后效果:相关代码:<!doctype html><html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“Generator” content=“EditPlus®"> <meta name=“Author” content=”"> <meta name=“Keywords” content=""> <meta name=“Description” content=""> <link id=“easyuiTheme” rel=“stylesheet” type=“text/css” href=“easyui1.4.1/themes/default/easyui.css?v=4.0”> <link rel=“stylesheet” type=“text/css” href=“easyui1.4.5/themes/icon.css?v=4.0”> <script type=“text/javascript” src=“easyui1.4.1/jquery.min.js?v=4.0”></script> <script type=“text/javascript” src=“easyui1.4.1/jquery.easyui.min.js?v=4.0”></script> <title>Document</title> </head> <body> <p> <a href=“javascript:void(0)” class=“easyui-linkbutton” onclick=“center()">Center</a> <a href=“javascript:void(0)” class=“easyui-linkbutton” onclick=“dialog()">dialog</a> </p> <div id=“dlg” class=“easyui-dialog” style=“width:200px;height:100px;padding:10px;” closed=“true”> org.springframework.jdbc.BadSqlGrammarException: PreparedStatementCallback; bad SQL grammar [/*mycat:schema=G_101_bi/ select a.,b.gna dsgna,b.daad dsad from dtip a left join dsrc b on a.dsgco = b.gco where 1=1 order by gco desc limit 0,20]; nested exception is com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column ‘b.gna’ in ‘field list’ </div> <script> var msg=“org.springframework.jdbc.BadSqlGrammarException: PreparedStatementCallback; bad SQL grammar [/*mycat:schema=G_101_bi/ select a.,b.gna dsgna,b.daad dsad from dtip a left join dsrc b on a.dsgco = b.gco where 1=1 order by gco desc limit 0,20]; nested exception is com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column ‘b.gna’ in ‘field list’”; var temp = escape(msg); function center(){ $.messager.show({ title:‘My Title’, msg:’<div style=“width:200px;word-wrap:break-word;">’+unescape(temp)+"</div>”, showType:‘fade’, width:250, height:200, timeout:0, draggable:true, style:{ right:’’, bottom:’’ } }); } function dialog(){ $(’#dlg’).dialog(‘open’); } </script> </body></html> ...

January 11, 2019 · 1 min · jiezi

解决easyui combobox赋值boolean类型的值时,经常出现的内容显示的value而不是text的bug

版本:EasyUI 1.7.0在用easyui写项目时,碰到一个combobox的奇葩bug。代码如下:<div> <select class=“easyui-combobox” id=“edit_sex” name=“sex” data-options=“label:‘性别:’, width:300, required:true”> <option value=“true”>男</option> <option value=“false”>女</option> </select></div>赋值语句如下:$(’#edit_sex’).combobox(‘setValue’, row.sex);本来这是一个很简单的combobox赋值,但是当我真正赋值时却出现了问题,经常出现一个bug,就是赋值完,combobox显示的内容是true或者false,而不是男或女,而且重现率极高。 我在测试了其他赋值情况后,发现是row.sex的值存在问题。该值是boolean类型,combobox赋值boolean类型的值的时候,会经常出现显示内容为value而不是text的bug。那么问题解决起来就简单了,把boolean类型改为字符串。修改后的赋值语句如下:$(’#edit_sex’).combobox(‘setValue’, String(row.sex));暂时不得而知bug原因。如果有人知道麻烦解答,谢谢。

January 5, 2019 · 1 min · jiezi