search

primefaces / primeui

Rich set of javascript-css only widgets
http://www.primefaces.org/primeui
283 stars 125 forks source link

can tree (treetable) support id/pid json? #204

Open yeahe83 opened 8 years ago

yeahe83 commented 8 years ago
  1. can tree (treetable) support id/pid json? data: [ { id:0, pid: -1, name: 'Documents', size: '75kb', type: 'Folder' }, { id:1, pid: 0, name: 'Work', size: '55kb', type: 'Folder' }, { id: 2, pid:1, name: 'Expenses.doc', size: '30kb', type: 'Document' }, { id: 3, pid: 1, name: 'Resume.doc', size: '25kb', type: 'Resume' }, { id: 4, pid: 0, name: 'Home', size: '20kb', type: 'Folder' }, { id: 5, pid: 4, name: 'Invoices', size: '20kb', type: 'Text' } ]
  2. can it support checkbox? data: [ { id:0, pid: -1, checked: true, name: 'Documents', size: '75kb', type: 'Folder' }, { id:1, pid: 0, checked: true, name: 'Work', size: '55kb', type: 'Folder' }, { id: 2, pid:1, checked: true, name: 'Expenses.doc', size: '30kb', type: 'Document' }, { id: 3, pid: 1, checked: true, name: 'Resume.doc', size: '25kb', type: 'Resume' }, { id: 4, pid: 0, checked: true, name: 'Home', size: '20kb', type: 'Folder' }, { id: 5, pid: 4, checked: true, name: 'Invoices', size: '20kb', type: 'Text' } ]
cagataycivici commented 8 years ago

No, you need PrimeUI TreeTable for that;

http://www.primefaces.org/primeui/#treetable

cagataycivici commented 8 years ago

Sorry I thought you were using PrimeFaces :) Please use forum for questions not the issue tracker. As a quick answer checkbox is not supported yet, PrimeFaces has it but not PrimeUI.

Number 1 should be supported, do you have an issue?

yeahe83 commented 8 years ago

thank you for you answer, but for number 1, i can't get the right pid/id json, like it in database..

    <script>

        $(function () {

            $('#container').puitreetable({
                columns: [
                    { field: 'name', headerText: 'Name' },
                    { field: 'size', headerText: 'Size' },
                    { field: 'type', headerText: 'Type' }
                ],
                nodes: [
                    //{
                    //    data: { name: 'Documents', size: '75kb', type: 'Folder' },
                    //    children: [
                    //        {
                    //            data: { name: 'Work', size: '55kb', type: 'Folder' },
                    //            children: [
                    //                {
                    //                    data: { name: 'Expenses.doc', size: '30kb', type: 'Document' }
                    //                },
                    //                {
                    //                    data: { name: 'Resume.doc', size: '25kb', type: 'Resume' }
                    //                }
                    //            ]
                    //        },
                    //        {
                    //            data: { name: 'Home', size: '20kb', type: 'Folder' },
                    //            children: [
                    //                {
                    //                    data: { name: 'Invoices', size: '20kb', type: 'Text' }
                    //                }
                    //            ]
                    //        }
                    //    ]
                    //},
                    //{
                    //    data: { name: 'Pictures', size: '150kb', type: 'Folder' },
                    //    children: [
                    //        {
                    //            data: { name: 'barcelona.jpg', size: '90kb', type: 'Picture' }
                    //        },
                    //        {
                    //            data: { name: 'primeui.png', size: '30kb', type: 'Picture' }
                    //        },
                    //        {
                    //            data: { name: 'optimus.jpg', size: '30kb', type: 'Picture' }
                    //        }
                    //    ]
                    //},

                    { id:0, pid: -1, name: 'Documents', size: '75kb', type: 'Folder' },
                    { id:1, pid: 0, name: 'Work', size: '55kb', type: 'Folder' },
                    { id: 2, pid:1, name: 'Expenses.doc', size: '30kb', type: 'Document' },
                    { id: 3, pid: 1, name: 'Resume.doc', size: '25kb', type: 'Resume' },
                    { id: 4, pid: 0, name: 'Home', size: '20kb', type: 'Folder' },
                    { id: 5, pid: 4, name: 'Invoices', size: '20kb', type: 'Text' }
                ]
            });
        });

    </script>

i give another project to show what i mean, just the 2nd one.

http://www.ztree.me/v3/demo.php#_101 http://www.ztree.me/v3/demo.php#_102