日期:2014-05-16  浏览次数:20422 次

easyui中怎样让树的子节点的文本内容多行显示
怎样可以让树如图一显示,而不是图二
<ul class="easyui-tree" id="tree"></ul>
  <script type="text/javascript">
$(function(){
$('#tree').tree({
onlyLeafCheck:$(this),
data:[{
text:'请选择',
state:'closed',
children:[
{
id:'t1',
text:'头孢噻肟或头孢曲松联合静脉注射大环内酯类'},
{
id:'t2',
text:'静脉注射呼吸喹诺酮类联合氨基糖苷类'},
{
id:'t3',
text:'静脉注射无抗假单胞菌活性的β-内酰胺类/β-内酰胺酶抑制剂(如阿莫西林/克拉维酸、氨苄西林/舒巴坦)联合静脉注射大环内酯类'},
{
id:'t4',
text:'厄他培南联合静脉注射大环内酯类'},
{
id:'t5',
text:'其他抗菌药'}
]
}],
checkbox:true,
onCheck: function(node, checked){
var str = "";
var treeArray = $(this).tree('getChecked');
for(var i=0;i<treeArray.length;i++){
str += treeArray[i].id + ",";
}
if(str.length>0)
str = str.substring(0, str.length-1);
$('#tree_cap5a1').val(str);
}
});
});
</script>

图一
]
图2
easyui tree CheckBox 多行

------解决方案--------------------
在需要断行的地方增加<br/>,然后增加下面的css顶部对齐复选框

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style>
/*---注意放在导入的easyui.css下面----*/
.tree-node{height:auto}
.tree-file,.tree-checkbox{vertical-align:top}
</style>