Question

在下面的代码中创建一个示例treegrid jqGrid，图像显示生成的网格：

这是代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>

        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
            background-color: #ffaaaa;
        }
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-toppager,
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
            background-color: #ffaaaa;
        }
    </style>

</head>
<body>

<table id="list10"></table>
<div id="pager"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<script>
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

<script type="text/javascript">
    $(function(){
        var mydata = [
            {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:false, expanded:false},
            {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"2", parent:"1_1", isLeaf:true, expanded:false},
            {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:true, expanded:false},
            {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
                level:"0", parent:"", isLeaf:false, expanded:true},
            {id:"2_1",Name:"Main Menu sdaadadadadadaadsdada",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false},
            {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false}
        ];

        $("#list10").jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['id','Name','MenuId','Menu Name'],
            colModel:[
                {name:'id',index:'id',width:100,hidden:true},
                {name:'Name',index:'Name',width:150},
                {name:'MenuId',index:'MenuId',width:100},
                {name:'MenuName',index:'MenuName',width:100}
            ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true },
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            height:'auto',
            pager : "pager",
            sortname: 'id',
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'Name',
            caption: "Sample Tree View Model"
        });
    })
</script>
</body>
</html>

我想知道以下几点：

正如您所看到的那样，叶子主菜单sdaadadadadadaadsdada 真的很长。我如何以这样的方式包装它：文本对用户可见而不扩展列，同时文本必须与单选按钮（项目符号）图标保持对齐。
如何更改顶部标题栏的背景和文字颜色？
如何将树节点（箭头）和叶子（项目符号/单选按钮图标）的默认图标图像更改为加/减（对于父节点）图标和黑点（对于树叶）？< / p>
当我点击当前显示绿色的行时，如何将其更改为其他颜色？
当我将鼠标悬停在以灰色突出显示的行上时，如何更改此颜色？

Answer 1

尝试添加以下CSS规则：

tr.jqgrow > td > .tree-wrap {
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

将结果如下图所示

您可以在float: left;上添加.tree-wrap：

tr.jqgrow > td > .tree-wrap {
    float: left;
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

更改包装文字侧面图标的位置（下面用红色标记）：

要更改jqGrid元素的颜色，只需添加相应的CSS样式即可。请参阅我为https://jsfiddle.net/OlegKi/90qmjean/创建的演示the answer。

如何将引导程序应用于标题和导航栏？

1 个答案: