Shulou(Shulou.com)06/03 Report--

This article mainly introduces Bootstrap-table how to achieve dynamic merger of the same lines, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Sometimes the requirements of tables are strange, and the recent table needs to be merged when the row elements of a column next to the record are the same. If they are not the same, they will not merge. This can be done easily if the order of the table data does not need to be changed (you only need to calculate the number of occurrences of all the same elements, regardless of whether they are next to each other), but when you can change the sort, there's a problem at this point. The expression may be a little confused, let's take a look at the picture to describe the problem.

For the specific requirements, suppose there are three records now, and the background will arrange them in the order x and pass them to the foreground page for display.

After the page gets the data and merges the peers, you can get the effect of the figure on the right, but if the sorting is disrupted after selecting a sort button on the page, how can you merge?

What is worth thinking about here is that the maximum number of merges for each subsequent column is based on the number of merges in the previous column, so here is a starting point to record the number of occurrences of all the adjacent peer content in the first column, and then traverse, to calculate the number of occurrences of all adjacent peer content in the second column, and then traverse to calculate the number of occurrences of all adjacent peer content in the third column. Go down in turn. Record the number of times of the same elements next to each column, then get them, and finally merge them using the mergeCells method that comes with bootstrapTable. I feel more and more important about data structure and algorithm. Recently, too many programs have been written involving some logical algorithms, so we should learn these two well when we go to school.

Let's look at the code:

Merge the table with the same name $(function () {/ / initialize Table $('# table') .bootstrapTable ({url:'${baseURL} / Views/cc.json',// request backend URL (*) here I use a json file method: 'get' / / request method (*) toolbar:'# which container is used by the toolbar',// tool button striped: true,// displays the interline color cache: false,// whether to use cache The default is true, so generally you need to set this property (*) pagination: whether true,// displays paging (*) sortable: false,// whether sorting is enabled sortOrder: "asc", / / sorting method / / queryParams: queryParams,// passing parameters (*) sidePagination: "server", / / paging method: client client paging Server server pagination (*) pageNumber: 1 search / initialize load the first page. Default first page pageSize: 10 / number of rows per page (*) pageList: [10,25,50,100], / / number of rows per page available (*) / / search: whether the true,// displays a table search, which is a client search. Will not enter the server contentType: "application/x-www-form-urlencoded", strictSearch: true, showColumns: true,// whether to display the content column drop-down box showRefresh: true,// whether to display the refresh button minimumCountColumns: 2. ClickToSelect: true / / whether to enable click to select rows / / here, if you want to fix the header, turn on height / / height: 700 row height / row height If the height property is not set, the table automatically feels the height of the table according to the number of records width:'50%', uniqueId: "id", / / the unique identification of each row General primary key column showToggle: true,// whether to display detail view and list view toggle button cardView: false,// whether to display detail view detailView: false / / whether to display the parent-child table onLoadSuccess: function (data) {/ / merge after the data is loaded successfully. Here I just merge projName subProj phase with the same name. If you need to merge more fields and add the corresponding code, you can mergeTable (data, "table"). }, columns: [{field: 'projName', title:' projName',}, {field: 'subProj', title:' subProj'} {field: 'phase', title:' phase'}, {field: 'workItem', title:' workItem',}, {field: 'completion' Title: 'completion',},],}) }); / / Global variable * if you only send an ajax request for a local update to table each time, you should clear these three variables before merging each time, otherwise the global variable will append the result var projNameCount= "; var subProjNameCount="; var phaseCount="by one value. / / merge table function mergeTable (data,tableId) {/ / clear global variables projNameCount= "; subProjNameCount="; phaseCount="; mergeCells (data.rows,0,data.rows.length," projName ", $('#'+ tableId)) before merging tables each time / / split a pair of projName,subProjName,phase times / / remove the comma at the end, sometimes without removing or removing my projNameCount = projNameCount.substring (0projNameCount.articthmur1); subProjNameCount = subProjNameCount.substring (0memjNameCount.articthmur1); phaseCount = phaseCount.substring (0menphaseCount.bearthMuth1); / / console.log (projNameCount+ "+" + subProjNameCount+ "+" + phaseCount) Var strArr1 = projNameCount.split (","); var strArr2 = subProjNameCount.split (","); var strArr3 = phaseCount.split (","); / / merge tables according to the number of times / / merge projName var index = 0; for (var item0) {/ / console.log ("phaseCount-" + phaseCount) Var temp = phaseCount.substring; / / phaseCount = phaseCount + ","; var strArr1 = temp.split (","); for (var item0) I1) {/ / console.log ("enter subProj-- to start index-" + startIndex+ "- end index--" + (startIndex+sortArr [prop]) * 1); mergeCells (datas,startIndex,startIndex+sortArr [prop], "phaseName", target)} else {phaseCount + = 1 + ",";}}

The complete code above is shown as follows: (this code only needs to calculate the merge of projName,subProj,phase, and workitem does not need to merge any more, because each workitem record is queried in the background.)

Among them, the method of merging cells that comes with bootstrap-table is also very useful and can only be completed on this basis.

$('# table'). BootstrapTable ('mergeCells', {index:index, field: "projName", colspan: 1, rowspan: count}); Thank you for reading this article carefully. I hope the article "how to dynamically merge peers in Bootstrap-table" shared by the editor will be helpful to you. At the same time, I hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.