Bootstrap Table Table Initialization Table Data Method


This item is an ASP.NET project, the development language is C #

2bootstrap-table Using the corresponding CSS And JS plug-in 3 Specific details need to view API document

Second, front-end code
  

[Description] 1Text-NOWRAP sets the table out of the non-wrap and display the scroll bar, avoiding the tabular column

2TABLE-RESPONSIVE: There is a Table-response, the table has a scroll bar without Table-response, the webpage has scroll bar
  $ ('# Table'). Bootstraptable ({ URL: '/ B_PRODUCT / GETPRODUCTDATA', // Requests the URL (*) Method: 'get', // Request method (*) Toolbar: '#toolbar', // Which container Striped: true, / / Whether it is displayed in line compliance cache: false, // Whether to use a cache, the default is true, so it is usually set to set this property (*) PAGINATION: true, // Show paging (*) sortable: false, // Whether to enable Sort SortOrder: "ASC", // Sort Mode QueryParams: Function (PageRequest) {Return PageRequest;}, // // Transfer Parameters (*) Sidepagination: "Server", // Page mode: Client client paging, Server server Page (*) Pagenumber: 1, // Initialization Loading First, Default 1 PageSize: 10, / / ​​The number of records per page (*) Pagelist: [10, 25, 50, 100], // The number of rows (*) Search: true, // is displayed, and this search is a client search, not entering the server, so personal feeling is not big strictSearch: true, showcolumns: True, / / Whether all columns showrefresh: true, // is displayed Refresh button MinimumumcountColumns: 2, // least allowed column number clicktoselect: True, // Do you enable Click to select WORKARTHT: TableHeight (), // High, If you do not set the Height property, the table automatically fits the form of the table height according to the number of records, the unique identity of the "ID", //, generally the primary key list ShowTogglE: False, / / ​​Whether to display the detailed view and list view of the switch button CardView: false, // Whether to display the detailed view DetailView: false, // Whether to display the father and child table showexport: true, // Whether to display the export button Buttonsalign: "Right ", // button position Exporttypes: ['Excel'], // Export file type icons: 'Glyphicon-Export', columns: [{checkbox: true}, {Field: 'id', title: 'number, visible : false}, {FIELD: 'ProductID', Title: 'Product Number'}, {Field: 'ProductName', Title: 'Product Name'}, {Field: 'ProductUser', Title: 'White Name'}, { Field: 'price', title: 'unit price (yuan)'}, {Field: 'Barcoderule', Title: 'Barcode Rule'}, {Field: 'iSUSING', TITLE: 'Enable Status', Formatter: Function (Value, Row, INDEX) {IF (Value == Enable ") Return ' Enables '; else returnide  Do not enable  ';}}, {Field:' Remark1 ', Title:' Note '},]});  
[Description] The above is the form initialization Method

1 The data returned by the request is the JSON array

2 The default parameter passed is of the number of pages and the size of the page. If the server paging, the paging mode is: Server

[ 3 tables followed (with the change of the page size, the size of the table is changed)

A TableHeight () method is written to obtain the height of the screen, while using Windows’s Resize method to re-pass the parameters, Refresh form

Function TableHeight () {var h = $ (window) .Height (); returni H-25;}
   [Reset to the table attribute value and refresh] 

$ (window) .resize (function () {$ (“# Table”). Bootstraptable (‘resetView’, {height: TableHeight ()});}; $ (“# Table”). Bootstraptable (“refresh”); // Table refresh data

4 Set Checkbox
 in Column: Settings the first column at COLUMNS: True, will use the full selection function  field: 'id', this The name needs to be displayed with the KEY value corresponding to JSON will display the corresponding value value  title: 'number, title is the name, the name of the display 
Visible: false indicates that the initial is invisible, can pass through the top right Button Settings and Not Display
5 in the table

in the table




Formatter: function (value, row, index) {if (value == “Enable”) Return ‘

Enables

‘; else return ‘

does not enable

‘;}
   The returned parameters have three, Value represents the current value, ROW represents the current line, the current number of index    summarizes  
The above is the method of the Bootstrap Table table initialization table data, I hope that if you have any questions, please reply to everyone in a timely manner if you have any questions. of. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment