corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 20 | office | 1 | # Table click-edit-row |
| 2 | |||
| 3 | Use Plugin: [bootstrap-click-edit-row](https://github.com/wenzhixin/bootstrap-table/tree/develop/src/extensions/click-edit-row) </br> |
||
| 4 | You must include the bootstrap-table-click-editable.css file in order to get the appropriate style. |
||
| 5 | Ps. Used this plugin is better on table columns not more than five. |
||
| 6 | |||
| 7 | ## Usage |
||
| 8 | |||
| 9 | ```html |
||
| 10 | <link rel="stylesheet" href="bootstrap-table-click-edit-row.css"></style> |
||
| 11 | <script src="bootstrap-table-click-edit-row.js"></script> |
||
| 12 | ``` |
||
| 13 | |||
| 14 | ## Options |
||
| 15 | |||
| 16 | ### editable |
||
| 17 | |||
| 18 | * type: input、select |
||
| 19 | * default: `input` |
||
| 20 | * description: Set select must setup `$.selectArray` for select options. |
||
| 21 | * $.selectArray example: `$.selectArray= {price: [{idxNum: '$', name: '100'}, {idxNum: '$', name: '500'}, {idxNum: '$', name: '5000'}]}`, obj name must same as 'data-field' value. |
||
| 22 | |||
| 23 | All options can be defined via `data-editable-*` HTML attributes. Table wide options are used for every row but can be overridden: |
||
| 24 | |||
| 25 | ````html |
||
| 26 | <table id="my_table_id" |
||
| 27 | data-url="data.json"> |
||
| 28 | <thead> |
||
| 29 | <tr> |
||
| 30 | <th data-field="id">ID</th> |
||
| 31 | <th data-field="name" data-editable="input">Item Name</th> |
||
| 32 | <th data-field="price" data-editable="select">Item Price</th> |
||
| 33 | </tr> |
||
| 34 | </thead> |
||
| 35 | </table> |
||
| 36 | ```` |