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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.