关于初次使用layui的一些记录

前言:年初公司准备自己做一个视频学习网站,第一次用layui作为前端框架

1.关于table的数据渲染:需要后台传递的json包含以下内容,由于公司后台框架的自动封装导致这个格式一直弄不出来

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 

后台的处理

        Dataset ds = new Dataset(dbSlrad);
		ds.setEnablePaging(false);
		int limit = Integer.parseInt(params.get("limit").toString());
		int page = Integer.parseInt(params.get("page").toString());
		String range = limit*(page-1) + "," + limit*page;
		String sql = "select user_id,user_name,depart_name,user_role,"
				+ "date_format(create_time, '%Y-%m-%d %H:%i:%s') AS create_time"
				+ " from tbl_user limit "+range;
		ArrayList<Object[]> ulist = ds.list(sql);
		
		JSONArray json = new JSONArray();
		JSONObject jsontemp;
		int i=0;
		for(Object[] temp : ulist) {
			jsontemp = new JSONObject();
			jsontemp.put("user_id", temp[0]);
			jsontemp.put("user_name", temp[1]);
			jsontemp.put("depart_name", temp[2]);
			jsontemp.put("user_role", temp[3]);
			jsontemp.put("create_time", temp[4]);
			json.put(i,jsontemp);
			i++;
		}
		JSONObject jsresult= new JSONObject();
		jsresult.put("code", 0);
		jsresult.put("msg","");
		jsresult.put("count",数据总量);
		jsresult.put("data", json);
		//System.out.println(jsresult.toString());
		HttpServletResponse response = WebContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");
		PrintWriter out;
		try {
			out = response.getWriter();
		//这里如果JSONObject不转成String 会报异常
		WebContext.getRequest().setAttribute("sl.respjson", jsresult.toString());
		out.print(jsresult);
		out.flush();
		} catch (IOException e) {
			// TODO 自动生成的 catch 块
		e.printStackTrace();
		}

2.关于layer获取父页面table中的数据

可在父页面定义一个全局变量var XXX = "",然后再layer中 通过parent.XXX 即可获取,这样可获取一个对象 而"xxxx.html?sss="?+sss这样的方式只能传递一个参数

3.关于layui第三方组件 layui.extends关联选择框以及多选框

在做修改功能的时候,要实现上述两个默认选中,selectM组件 selected的传值 不能识别

var tagIns2 = selectM({
					//元素容器【必填】
					elem: '#tag_ids2'
						//候选数据【必填】
						,
					data: window._h5_config.server_url + 'ClassService.classPublic.slrad'
						//默认值
						,
					
						//最多选中个数,默认5
						,
					max: 6
						//input的name 不设置与选择器相同(去#.)
						,
					name: 'class_public'
						//值的分隔符
						,
					delimiter: ','
						//候选项数据的键名
						,
					verify: 'required',
					field: {
						idName: 'id',
						titleName: 'name'
					}
				});
				//arr为数组 直接把arr塞入selected: []是不起作用的
				
				tagIns2.set(arr);

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui表格与layui分页组件可以很好地搭配使用,可以实现数据的分页展示,具体使用方法如下: 1. 引入layui框架和相关样式文件: ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 创建一个容器用于展示表格和分页组件: ```html <div id="demo"></div> ``` 3. 编写JavaScript代码,渲染表格和分页组件: ```javascript layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 表格渲染 table.render({ elem: '#demo', url: '/data.json', // 数据接口 cols: [[ // 表头 {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 80}, {field: 'score', title: '评分', width: 80}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 120} ]] }); // 分页组件渲染 laypage.render({ elem: 'demo', // 分页容器的id count: 50, // 数据总数 limit: 10, // 每页显示的条数 curr: location.hash.replace('#!fenye=', ''), // 获取hash值作为当前页码 hash: 'fenye', // 自定义hash值 jump: function(obj, first){ if(!first){ // 非首次加载才会执行 table.reload('demo', { where: { // 其他参数 page: obj.curr, limit: obj.limit } }); } } }); }); ``` 以上代码中,`table.render()`函数用于渲染表格,`laypage.render()`函数用于渲染分页组件。其中,`table.reload()`函数用于重新加载表格数据,实现分页效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值