|
|
|
@ -1,18 +1,10 @@
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html> |
|
|
|
|
<head> |
|
|
|
|
<meta charset="utf-8"> |
|
|
|
|
<title>树组件 - layui</title> |
|
|
|
|
<meta name="renderer" content="webkit"> |
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
|
|
|
<meta name="format-detection" content="telephone=no"> |
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css" media="all"> |
|
|
|
|
|
|
|
|
|
<title>树组件 - layui</title> |
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css" media="all"> |
|
|
|
|
<style> |
|
|
|
|
body{padding: 100px;} |
|
|
|
|
#test1,#test2{margin-bottom: 100px; width: 400px;} |
|
|
|
@ -48,118 +40,118 @@
|
|
|
|
|
|
|
|
|
|
//数据源 |
|
|
|
|
var data1 = [{ |
|
|
|
|
title: '一级1' |
|
|
|
|
title: 'A-1' |
|
|
|
|
,id: 1 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '二级1-1' |
|
|
|
|
title: 'B-1-1' |
|
|
|
|
,id: 3 |
|
|
|
|
,href: 'https://www.layui.com/doc/' |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级1-1-3' |
|
|
|
|
title: 'C-1-1-3' |
|
|
|
|
,id: 23 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '四级1-1-3-1' |
|
|
|
|
title: 'D-1-1-3-1' |
|
|
|
|
,id: 24 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '五级1-1-3-1-1' |
|
|
|
|
title: 'E-1-1-3-1-1' |
|
|
|
|
,id: 30 |
|
|
|
|
},{ |
|
|
|
|
title: '五级1-1-3-1-2' |
|
|
|
|
title: 'E-1-1-3-1-2' |
|
|
|
|
,id: 31 |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '三级1-1-1' |
|
|
|
|
title: 'C-1-1-1' |
|
|
|
|
,id: 7 |
|
|
|
|
,checked: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '四级1-1-1-1' |
|
|
|
|
title: 'D-1-1-1-1' |
|
|
|
|
,id: 15 |
|
|
|
|
//,checked: true |
|
|
|
|
,href: 'https://www.layui.com/doc/base/infrastructure.html' |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '三级1-1-2' |
|
|
|
|
title: 'C-1-1-2' |
|
|
|
|
,id: 8 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '四级1-1-2-1' |
|
|
|
|
title: 'D-1-1-2-1' |
|
|
|
|
,id: 32 |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '二级1-2' |
|
|
|
|
title: 'B-1-2' |
|
|
|
|
,id: 4 |
|
|
|
|
,spread: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级1-2-1' |
|
|
|
|
title: 'C-1-2-1' |
|
|
|
|
,id: 9 |
|
|
|
|
,checked: true |
|
|
|
|
,disabled: true |
|
|
|
|
},{ |
|
|
|
|
title: '三级1-2-2' |
|
|
|
|
title: 'C-1-2-2' |
|
|
|
|
,id: 10 |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '二级1-3' |
|
|
|
|
title: 'B-1-3' |
|
|
|
|
,id: 20 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级1-3-1' |
|
|
|
|
title: 'C-1-3-1' |
|
|
|
|
,id: 21 |
|
|
|
|
},{ |
|
|
|
|
title: '三级1-3-2' |
|
|
|
|
title: 'C-1-3-2' |
|
|
|
|
,id: 22 |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '一级2' |
|
|
|
|
title: 'A-2' |
|
|
|
|
,id: 2 |
|
|
|
|
,spread: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '二级2-1' |
|
|
|
|
title: 'B-2-1' |
|
|
|
|
,id: 5 |
|
|
|
|
,spread: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级2-1-1' |
|
|
|
|
title: 'C-2-1-1' |
|
|
|
|
,id: 11 |
|
|
|
|
},{ |
|
|
|
|
title: '三级2-1-2' |
|
|
|
|
title: 'C-2-1-2' |
|
|
|
|
,id: 12 |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '二级2-2' |
|
|
|
|
title: 'B-2-2' |
|
|
|
|
,id: 6 |
|
|
|
|
,checked: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级2-2-1' |
|
|
|
|
title: 'C-2-2-1' |
|
|
|
|
,id: 13 |
|
|
|
|
},{ |
|
|
|
|
title: '三级2-2-2' |
|
|
|
|
title: 'C-2-2-2' |
|
|
|
|
,id: 14 |
|
|
|
|
,disabled: true |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '一级3' |
|
|
|
|
title: 'A-3' |
|
|
|
|
,id: 16 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '二级3-1' |
|
|
|
|
title: 'B-3-1' |
|
|
|
|
,id: 17 |
|
|
|
|
,fixed: true |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级3-1-1' |
|
|
|
|
title: 'C-3-1-1' |
|
|
|
|
,id: 18 |
|
|
|
|
},{ |
|
|
|
|
title: '三级3-1-2' |
|
|
|
|
title: 'C-3-1-2' |
|
|
|
|
,id: 19 |
|
|
|
|
}] |
|
|
|
|
},{ |
|
|
|
|
title: '二级3-2' |
|
|
|
|
title: 'B-3-2' |
|
|
|
|
,id: 27 |
|
|
|
|
,children: [{ |
|
|
|
|
title: '三级3-2-1' |
|
|
|
|
title: 'C-3-2-1' |
|
|
|
|
,id: 28 |
|
|
|
|
},{ |
|
|
|
|
title: '三级3-2-2' |
|
|
|
|
title: 'C-3-2-2' |
|
|
|
|
,id: 29 |
|
|
|
|
}] |
|
|
|
|
}] |
|
|
|
@ -222,7 +214,7 @@
|
|
|
|
|
console.log(checkedData); |
|
|
|
|
} |
|
|
|
|
,setChecked: function(){ |
|
|
|
|
tree.setChecked('demoId1', [1000, 1001, 1002]); |
|
|
|
|
tree.setChecked('demoId1', [11,12]); |
|
|
|
|
} |
|
|
|
|
,reload: function(){ |
|
|
|
|
tree.reload('demoId1', { |
|
|
|
|