[BootStrap] basic use of Table, bootstraptable

[BootStrap] basic use of Table, bootstraptable

I. Preface

New Year's new weather, in the twinkling of an eye, this year is 28. I wonder if I can make my sister a success this year? Haha! On the first day of work, the Department's Web technology Director sent a red envelope to each of my colleagues to encourage everyone to cheer up this year. As a new employee in the department, I cannot drop the chain for the team, so I must learn to keep up with the team. Everyone is off duty. I am quietly summing up the previous BootStrap knowledge.

 

Ii. Content

<Div> <table id = "ExampleTable" data-toggle = "table" class = "table-hover" data-url = "/api/Controller/Action" data-method = "post" // obtain data in Post mode data-side-pagination = "server" // server page data-pagination = "true" // whether paging data-query-params is supported -type = "" // If RestFul is supported, write 'limit' data-query-params = qcondition> // query condition <thead> <tr> <th data-field =" field1 "data-valign =" middle "> field 1 </th> <th data-field =" field2 "data-valign =" middle "data-class =" field2-class "data -formatter = "Formatfield2" data-events = "operateField2Events"> Field 2 </th> <th data-formatter = "FormatItem3" data-valign = "middle"> Project 3 </th> </tr> </thead> </table> </div>

 

BootStrap<Table>Tags:

The attribute data-query-params is used to filter the obtained server data. We can write this in js:

var qcondition = function (params) {   var temp = {
        FilterText: filterValue,
        Condition: params.searchText,
        PageSize: params.pageSize,
        PageIndex: params.pageNumber - 1
    };
    return temp;};

 

In Controller, we need to obtain the corresponding data based on qcondition:

public class QueryDataInfo
{   
    public string FilterText { get; set; }
    public string Condition { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
}

[HttpPost] public HttpResponseMessage Action (QueryDataInfo dataInfo) {long recordCount = 0; IList <DataInfo> list = Query (dataInfo, out recordCount); return ResultJson. buildJsonResponse (new {total = recordCount, rows = list}, MessageType. none, string. empty );}

Public IList <DataInfo> Query (QueryDataInfo dataInfo, out long recordCount)
{
IList <DataInfo> list = new List <DataInfo> ();
String [] includePath = {"ForeignKey "};
List = DataRepository. LoadPageList (out recordCount,
DataInfo. PageIndex * dataInfo. PageSize,
DataInfo. PageSize,
D => d. Text = dataInfo. FilterText,
O => o. ID,
False,
IncludePath );
Return list;
}


// Write the following code in the base abstract class
Public IList <TEntity> LoadPageList <TKey> (out long count,
Int pageIndex,
Int pageSize,
Expression <Func <TEntity, bool> expression = null,
Expression <Func <TEntity, TKey> orderBy = null,
Bool ascending = true,
Params string [] includePath)
{
IQueryable <TEntity> defaultQuery = Query (expression,
IncludePath );
If (orderBy! = Null)
{
If (ascending)
DefaultQuery = defaultQuery. OrderBy (orderBy );
Else
DefaultQuery = defaultQuery. OrderByDescending (orderBy );
}
Count = defaultQuery. Count ();
DefaultQuery = defaultQuery. Skip (pageIndex). Take (pageSize );
Return defaultQuery. ToList ();
}

Public IQueryable <TEntity> Query (Expression <Func <TEntity, bool> expression = null,
Params string [] includePath)
{
IQueryable <TEntity> defaultQuery = mobjContext. Context. Set <TEntity> ();
If (includePath! = Null)
{
Foreach (string path in includePath)
{
If (! String. IsNullOrEmpty (path ))
{
DefaultQuery = defaultQuery. Include (path );
}
}
}

If (expression! = Null)
DefaultQuery = defaultQuery. Where (expression );
Return defaultQuery;
}

 

BootStrap<Th>Tags:

Data-field: data field, which corresponds to the field in the returned object.

Data-class: the class of the <th> label, which is generally used to customize the css style of the column.

<style>    .field2-class {        min-height: 0px;    }</style>

 

Data-formatter: changes the format of the column data

function Formatfield2(value, row, index) {    return '<span class="link-name item-name">' + row.Name + '</span><input type="hidden" class="hiddenRowid" value='+row.ID+' />';}

 

Data-events: data events in this column, such as the events that occur when you click a field in this column.

window.operateField2Events = {    'click .class-name': function (e, value, row, index) {             //do something    }}

 

3. End

The relevant content about BootStrap will be updated continuously in the future!