wenzhixin / bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
https://bootstrap-table.com/
MIT License
11.73k stars 4.44k forks source link

Static defined Root rows in table with TreeGrid #4761

Open hapvlz opened 4 years ago

hapvlz commented 4 years ago

Hello everyone,

first of all - I love bootstrap-table :-) Thank you for this project. I wanted to ask if its possible to create something like "static root rows" in bootstrap-table treegrid view?

for ex. before pulling data into the table I want to create there three static rows which will be a "root node" for incoming data.

Later I'll parse the data to assign it to proper parent. What I want to achieve is to have from begining 3 root nodes to which I'll assign database results.

So ->

1 -> Initialize bootstrap-table 2 -> define three root parents (for ex. Root node no.1 / Root node no.2 / Root node no.2) 3 -> load data from database 4 -> assign data to correct root parent

I just have problem with the point no. 2 I have no clue how I can achieve that, I don't want to mix output from database just to build the root nodes because I'll have to mess with the data and the root nodes I want to make with colspan = so it will have just one Text saying for ex. Root No.1 and using treegrid expand to view sub-objects.

I wanted to provide jSfiddle with example, but its hard to provide example of something that doesn't exists, also my code is crazy and js/css is stored localy and I can't find exactly same js/css in jsfiddle base and the output of code is not properly shown in jsfiddle.

Thank you for understanding, appreciate any kind of suggestions, you will save me few days of trying to figure it on my own. Unfortunately there are very less communication where we can find examples (especially for treegrid). I found some articles but they are in Chinesee :D

I reviewed documentation like 5 times, couldn't find anything similar.

hapvlz commented 4 years ago

I tried -

groupBy: true, groupByField: ['SID'],

It actually works nice, and it's something what I needed. However the problem is (as far I understand in documentation) it support only one groupByField.

Let's say my data is like this:

'[{"id":1,"pid":0,"SID":"PRD","tst_hostname":"hostname1","tst_port":"38111","tst_active":"1","tst_component":"ECC","tst_datacenter":"Germany","tst_environment":"Sandbox","tst_display":"ECC_DVEBMGS01","tst_service":"Gateway","status":"Online","status_since":"2h","last_update":"2012-12-06T02:12:35.047Z"},' 
        '{"id":2,"pid":0,"SID":"SBX","tst_hostname":"hostname2","tst_port":"1433","tst_active":"1","tst_component":"ECC","tst_datacenter":"Netherland","tst_environment":"Production","tst_display":"ECC_ASCS00","tst_service":"Message Server","status":"Offline","status_since":"33h","last_update":"2016-08-06T02:12:35.047Z"}

'{"id":3,"pid":0,"SID":"DEV","tst_hostname":"hostname3","tst_port":"1433","tst_active":"1","tst_component":"ECC","tst_datacenter":"Netherland","tst_environment":"Production","tst_display":"ECC_ASCS00","tst_service":"Message Server","status":"Offline","status_since":"33h","last_update":"2016-08-06T02:12:35.047Z"}

And I would like to have three groupByField First: tst_datacenter Second: tst_environment Third: SID

Above code works fine but only for SID. I would like to make sub-groups like

tst_datacenter -> tst_environment -> SID

So ->

Group: Germany -> Group: Sandbox -> Group: PRD -> Inside of it all items which have same criteria Group: Netherland -> Group: Production -> Group: SBX & Group: DEV -> inside of it all items which have same criteria

I hope it's understandable.

hapvlz commented 4 years ago

I'm trying now also treegrid using ID + PID. Looks interesting also, but the problem is that I am not sure how I can create dynamic headers for such json data.