$(this).attr(“属性”);
将图片的URL存入key属性中
<div class="layui-form-item">
<img tag="img" key="bg-1.jpg" src="../image/bg-1.jpg" width="150" height="100" style="border:2px solid blue;"/>
<img tag="img" key="bg-2.jpg" src="../image/bg-2.jpg" width="150" height="100"/>
<img tag="img" key="bg-3.jpg" src="../image/bg-3.jpg" width="150" height="100"/>
div>
选取被点击的图片的URL
$('[tag="img"]').click(function(){
var bgUrl = $(this).attr("key");
});
标签属性为 :data-属性
取值:$(this).data(“属性”)
<button class="layui-btn layui-btn-primary layui-btn-xs" data-id="1" data-name="name" data-url="url" data-key="edit">编辑button>
<button data-key="delete" data-id="1" class="layui-btn layui-btn-danger layui-btn-xs">删除button>
<button data-key="setup" data-id="1" class="layui-btn layui-btn-success layui-btn-xs">成员设置button>
$("[data-key='setup']").click(function () {
var id=$(this).data("id");
});
$("[data-key='delete']").click(function () {
var id=$(this).data("id");
$.post('project/deleteProject',{id:id},function () {
layer.msg("删除成功");
})
});
get
//后台返回结果
@RequestMapping("/getProjectList")
public ResponseEntity getProjectList(ProjectVo projectVo){
List<ProjectVo> projectList = projectService.getProjectList(projectVo);
Map<String,Object> data = CollectionUtil.newHashMap();
data.put("code",0);
data.put("list",projectList);
return ResponseEntity.ok(data);
}
//data为响应结果 一般为map集合
$.get('project/getJoinProject',{属性:属性值},function(data){
//可使用data.key取得data中的value值
var list = data.list;
var code = data.code;
},'json');
post
$.post('url',{属性:属性值},function(data){
},'json');
//存储鼠标点击的树节点
<input type="hidden" id="pId">
<input type="hidden" id="pName">
//树
<div class="layui-col-md2">
<ul id="userTree">ul>
div>
//data为后端传入数据,其结构应为
/*[{ //节点
id:1,
name: '父节点1'
,children: [{
id:11,
name: '子节点11'
},{
id:12,
name: '子节点12'
}]
},{
id:2,
name: '父节点2(可以点左侧箭头,也可以双击标题)'
,children: [{
id:21,
name: '子节点21'
,children: [{
id:211,
name: '子节点211'
}]
}]
}]*/
function loadTree(){
$("#userTree").html(""); // 清空防止重复
$.get('org/getOrgListTree',{},function(data){
layui.tree({
elem: '#userTree' //传入元素选择器
,nodes: data
,click: function(node){
$("#pId").val(node.id);
$("#pName").val(node.name);
});
},'json');
}
loadTree();
<table class="layui-hide" id="test" lay-filter="test">table>
头部工具栏
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
表格工具栏
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
表格数据获取
table.render({
elem: '#test'
,url:'/test/table/demo1.json'
,toolbar: '#toolbarDemo'
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
return ''+ res.email +''
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
头部工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
};
});
表行工具栏事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
表格重载
table.reload('test', {
page: 1
,where: {
//需要传递新的属性
属性:属性值
}
});