Question

jqGrid脚本

<script type="text/javascript">

var call_url = "<?php echo SOME_URL ?>";
jQuery("#grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
         treeGrid: true,
                treeGridModel: "adjacency",
                ExpandColumn: 'TASK_NAME',
    rowNum: 20,
    rowList: [20,30],
    colNames:['Task#','Project ID','Task Name', 'Created By', 'Start Date', 'End Date', 'Status', 'Action'],
    colModel:[
        {name:'TASK_ID',index:'TASK_ID', align:'center',search:false,key:true},
        {name:'PROJ_ID',index:'PROJ_ID',search:false, align:"center"},
        {name:'TASK_NAME',index:'TASK_NAME', search:false},
        {name:'TASK_CREATED_BY',index:'TASK_CREATED_BY',search:false,align:"center" },
        {name:'TASK_START_DATE',index:'TASK_START_DATE',search:false ,align:"center"},
        {name:'TASK_END_DATE',index:'TASK_END_DATE',search:false,align:"center" },
                {name:'TASK_STATUS',index:'TASK_STATUS',search:false,align:"center" },
        {name:'ACTION',index:'id', search:false,align:'center',sortable:false, formatter: 'actions',
                formatoptions: {
                    keys: true,
                    editformbutton: false,
                    delOptions: { url: delete_task_url}
                }},
    ],
        prmNames: { id: "TASK_ID" },
    pager: "#page",
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    sortname: 'TASK_ID',
    caption: "Task List",
    gridComplete: function () {

            var recs = $("#grid").getGridParam("records");
            $( ".mycontent" ).remove();
            if (recs == 0 || recs == null) {
                $('#grid').after("<div class='mycontent' style='color:red;text-align:center'>No Record Found</div>");
            }

        }

        }).navGrid('#page',{ edit:false,add:false,del:false,search:false,cloneToTop:true,refresh:false},
        {

        },{
    //add options

    },{

    //msg: "do you really want delete this keyword? This delete affect on Eqms filter"

    });

        jQuery("#grid").jqGrid('filterToolbar', { autosearch: true  });
    var topPagerDiv = $('#grid_toppager')[0]; 
        jQuery("#grid_toppager_center", topPagerDiv).remove();

</script>

我有Task(Parent) and SubTasks(Child)分配给Tasks的列表。在网格上，我需要以tree node格式显示它们，这样如果父任务由子任务组成，用户可以单击它，它将显示在该特定任务下创建的子任务。

Task and Sub-task list

此处Sub-Task One和Sub-Task Two位于Task-1之下，点击它时，将会加载并显示edit/delete个选项。

来自服务器的响应：

{"page":"1","total":1,"records":"7","rows":[{"cell":["1","438","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","<a href='someurl'><span class='ui-icon ui-icon-pencil'><\/span><\/a>"]}}

此外，我不愿意在页面加载时显示所有任务及其子任务，因为当任务太多时可能会产生性能问题。

我已经为Tree Node尝试了here提到的代码，但无论如何都无法使其正常工作。

在所需格式的passing the param之后，输出仍是

enter image description here

感谢。

Answer 1

您只需将服务器返回的数据扩展为

{"page":"1","total":1,"records":"7","rows":[
    {"cell":["1","111","Task One","User 1","10-NOV-14","11-NOV-14","Active","","0","null","false","false"]},
    {"cell":["2","111","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","","1","1","true","true"]},
    {"cell":["3","111","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","","1","1","true","true"]}
]}

事件最好是使用ISO 8601日期格式，如“2014-11-10”而不是“10-NOV-14”，并使用相应列中的formatter: "date", formatoptions: {newformat: "d-M-y"}属性将日期转换为所需格式colModel。

更新：相应的演示为here。我个人建议您将ExpandColumn: 'TASK_NAME'中使用的列设置为TreeGrid的第一个可见列。

任务和子任务的jqGrid树节点结构

1 个答案: