Bootstrap table common methods (time control, export, dynamic drop-down box, form verification, selection and information retrieval) code sharing, bootstraptable

Bootstrap table common methods (time control, export, dynamic drop-down box, form verification, selection and information retrieval) code sharing, bootstraptable

1. bootstrap-table click a single row to select

$ ('# Gzrwtable '). on ('click-row. bs. table ', function (e, row, $ element) {$ ('. success '). removeClass ('success '); // clear the selected row status for the previous operation $ ($ element ). addClass ('success '); // select a row to add a selected status });

2. bootstrap-table: Get the information of the selected row

function getSelectedRow() {var index = $('#gzrwTable').find('tr.success').data('index');return $('#gzrwTable').bootstrapTable('getData')[index];}

3. Enter the default current time in the time control.

var date = new Date();var mon = date.getMonth() + 1;var day = date.getDate();var nowDay = date.getFullYear() + "-"+ (mon < 10 ? "0" + mon : mon) + "-"+ (day < 10 ? "0" + day : day);$("#endTime").val(nowDay);

4. bootstrap-table verify the form information according to the name value

Function checkForm (formId) {$ (formId ). bootstrapValidator ({message: 'This value is not valid', feedbackIcons: {valid: 'glyphicon glyphicon-OK ', invalid: 'glyphicon glyphicon-delete', validating: 'glyphicon glyphicon-refresh'}, fields: {task: {group :'. col-sm-10 ', // corresponds to the front-end input class occupation width validators: {notEmpty: {message:' Fill in the task content! '}}, Tel: {group:'. col-sm-4 ', // specifies the width of the class occupied by the front-end input. validators: {notEmpty: {message:' enter the phone number! '}, Phone: {country: "CN", message: 'incorrect phone Number Format' }}, area: {group :'. col-sm-4 ', // specifies the class occupation width of the front-end input validators: {numeric: {message:'. Enter a number! '}}}, Endtime: {group:'. col-sm-4 ', // specifies the width of the class occupied by the front-end input. validators: {notEmpty: {message:' select the end date! '}}},});} // Obtain the form verification data var bootstrapValidator = $ ("# addTaskForm "). data ('bootstrapvalidator'); // verify the form bootstrapValidator. validate (); // determine whether all verification passes. If yes, run ajaxif (! BootstrapValidator. isValid () {return ;}

5. dynamically load the content of the drop-down box.

Function setUser () {$ ("# receiver") [0]. options. length = 0; $. ajax ({type: 'post', url: $. el. register. appUrl + "gzrw/selectUser", dataType: 'json', success: function (data) {$ ("# er Er") [0]. options. add (new Option ('select ', ''); for (var I = 0; I <data. length; I ++) {$ ("# receiver") [0]. options. add (new Option (data [I]. name, data [I]. id);} // refresh the content in the drop-down box $ ("# Cycler "). selectpicker ('refresh') ;}, error: function (e ){}});}

6. Export events

$ ("# BtnExport "). click (function () {var tableNum = $ ("# sgnqTable thead tr th "). length; $ ("# sgnqTable "). tableExport ({type: 'excel ', // 'csv', 'txt', 'SQL', 'json', 'xml', 'excel ', // 'Doc', 'png 'or 'pdf' fileName: 'table name', escape: 'false', ignoreColumn: [tableNum-1, tableNum-4], // columns not exported });});

LowerWe will share with you the time processing for the whole form upload of a large number of fields in bootstrapt-table.

In js, use $ ('# addUserForm'). serialize (), // obtain all the data in the form and send it to the front-end (controller)

$. Ajax ({type: "POST ",

Url: $. el. Register. AppUrl + "path ",

Data: $ ('# addUserForm'). serialize (), // obtain all data in the form

DataType: 'json ',

Async: false,

Success: function (msg ){},

Error: function (error ){}});

In this case, if there is a time type in the form, the time type of the front-end (object) cannot be received because all the data is passed in string type.

 Solution:

(1) Add @ DateTimeFormat (pattern = "yyyy-MM-dd") to the field in the entity object ")

(2) Use a String in the controller to connect this variable (cannot be the same as the field name) to the time type and then use it.

Public String addTask (User user (entity object), String dateStr (used for receiving time) {SimpleDateFormat sdf = new SimpleDateFormat ("yyyy-MM-dd "); parsePosition pos = new ParsePosition (0); Date date = sdf. parse (dateStr, pos); gzrw. setEndtime (date); // Add the time to the object
}

The above is a general bootstrop table method (time control, export, dynamic drop-down box, form verification, selection, and information retrieval) that I will share with you. I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!