zoukankan      html  css  js  c++  java
  • 若依项目开发实践

       记录下使用若依项目,在实际开发过程中,可能需要用到的开发点。

       1、表格中字典转化:

    var datas = [[${@dict.getType('sys_user_sex')}]];
    
    formatter: function(value, row, index) {
    	return $.table.selectDictLabel(datas, value);
    }
    

     2、日期格式化

    方式一:
    formatter: function(value, row, index) {
    	return value.substring(0,10);   
    }
    方式二:
    @JsonFormat(pattern="yyyy-MM-dd")
    private Date birthday;
    

     3、隐藏表格某列

             {
                        field : 'id', 
                        visible : false
                    }, 

    或者

    $('#bootstrap-table').bootstrapTable('hideColumn', 'id');	
    

     4、表单中的选择框实现,以及值选中

    <div class="form-group">
    	<label class="col-sm-3 control-label">性别:</label>
    	<div class="col-sm-8">
    		<select id="gender" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
    		<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${user.userSex eq dict.dictValue}"></option>
    		</select>
    	</div>
    </div>    
    
    还需加:
    <script th:src="@{/ajax/libs/select/select2.js}"></script>	
    

      5、单日期选择,更多的参数配置可参看:https://blog.csdn.net/weixin_38023551/article/details/78215803

    <input id="birthday" name="birthday" class="form-control" type="text">
    
    $(function() {
    	//初始化日期选择器
    	layui.use('laydate', function() {
    		var laydate = layui.laydate;
    		laydate.render({
    		  elem: '#birthday', //指定元素
    		  trigger: 'click'
    		});
    	});
    
    });
    

      6、表单校验,使用的是jquery.validate,具体使用细节可参看:http://www.runoob.com/jquery/jquery-plugin-validate.html

           7、使用EasyPoi实现导出功能

                将easyPoi集成到springboot中可参考:https://www.jianshu.com/p/5d67fb720ece

                具体EasyPoi的使用可以参考:http://easypoi.mydoc.io/#text_186900

                导入功能可参考:https://www.cnblogs.com/conswin/p/10008822.html

                集成过程中针对该项目需要调整的地方:

                 ①、需要去除ruoyi-common项目中pom.xml里poi-ooxml的引入,加入EasyPoi相应的依赖包,此时ExcelUtil.java会报错,将错误处注释掉即可,不影响原本方式的导出。

                        (此处将原本的poi依赖包去除的原因是,导入EasyPoi依赖包后,会与原来的Poi依赖包冲突)

                 ②、在ry-ui.js中加入以EasyPoi方式导出的方法,以便前端调用,具体代码如下:

    //使用EasyPoi方式下载
    easyExportExcel: function(formId) {
    	var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
    	$.modal.loading("正在导出数据,请稍后...");
    	var paramsArray =  $("#" + currentId).serializeArray();
    	var param = "";
    	$.each(paramsArray, function(i, field){
    		if(field.value != ''){
    			param = param + field.name + "=" + field.value + "&";
    		}
    	});
    	window.location.href = $.table._option.exportUrl + "?" + param ; 
    	$.modal.closeLoading();
    
    },
    

           ③、具体调用页面只需将原来的 onclick="$.table.exportExcel()"改成 onclick="$.table.easyExportExcel()"即可。

         ④、需要注意的地方,原来传递开始日期及结束日期是放在params中的,以现在的方式传递开始时间及结束时间时不适合放入params中(尝试了很多办法,还是没有成功)。
                       解决办法可以在对应业务实体中加入startTime及endTime字段,生成get、set方法,
                       页面中将原本name=params[beginTime]改为name=startTime,name=params[endTime]改为name=endTime,
                       在对应mapper中将#{params.beginTime}改为#{startTime},将#{params.endTime}改为#{endTime}即可。

      8、其他注意点

                ①、如果是初始化树形列表的 $.treeTable.init(options);,需要隐藏相应字段,则不可以使用 visible : false,不然会导致不树形展示的问题

                ②、如果是初始化正常列表的 $.table.init(options);,在mapper的sql语句中不能使用order by 进行排序,不然会发生执行sql保存,可以在options 配置中加入需要排序的字段即可

  • 相关阅读:
    2015生命之旅---第三站象山之行
    我的八年程序之路(四)程序路上的新起点
    2015生命之旅---第二站长沙杭州
    2015生命之旅---第一站重庆
    我的八年程序之路(三)为了理想放弃高薪
    锋友分享:国行和非国行iPhone的送修需知
    iPhone被盗后续更新二:被换机!已取机!没扣住新机!怎么找新机呢?事发半年后跟进...
    iPhone被盗后续更新一:怎么找老机
    iPhone被盗后怎么?这篇文章只办针对iOS7后的系统
    四个小诀窍 告诉你雪景怎么拍才能更好看
  • 原文地址:https://www.cnblogs.com/conswin/p/9766366.html
Copyright © 2011-2022 走看看