Comments (23)
@ratiw of course, but will be great feature for your vue-table :D
from vue-table.
Turns out vuetable
can now use vue-editable to do inline editing. You can try it out by following this instructions.
git clone https://github.com/ratiw/vuetable-example-vueify-bootstrap.git vevb
cd vevb
git checkout develop
npm install
npm run dev
- Open your browser and go to
http://localhost:8080
- Open web browser console to see the output message
- Try double-click on any cell
Pro:
-
This way
vuetable
can stay light without having to embed the inline editing feature inside. -
cell-dblclicked
is just another event, you can choose to do anything with it or nothing at all. -
Someone else can extend vue-editable to make more features out of it or even make another one that support different field type inline editing.
-
You can add more option(s) to field definition and make use of it inside the event, like
events: { 'vuetable:cell-dblclicked': function(item, field, event) { if (field.editor === 'select') { // do something here } } }
Con:
- You will need to keep track and handle any change you made back to the server side yourself.
What do you guys think? @NightZpy @mdaliyan @mozami
from vue-table.
@NightZpy vue-editable component looks very interesting. Anyway, vuetable was never meant to have inline editing as it would complicate the data update on the server. It would better suits for another table component that does not deal ajax request directly. But let me think about it and see if there is any interesting way to do it. :)
from vue-table.
I add in my project, using vue-editable -really very tiny, but works-:
method for vuetable:
editable: function(e, field , id, token){ updateData['_token'] = token; updateData[field] = value; this.$editable(e,function(value){ Vue.http.patch(url.update + id, updateData, function (result){ console.log(result); }); }); },
In vuetable template:
`
But the vue-editable, only works passing to textfield. Very interesting add support for select, checkbox, radio or anothers field types!
from vue-table.
@NightZpy I know what you mean. It's a quick and easy way, but I just don't think that it is the appropriate way to go. It should be implemented as plugin for the component. But I never thougt about plugin for vuetable before, so I will have to think about it and see if it is possible. Thanks for the suggestion anyway. :)
from vue-table.
I like, better than implement as attribute inner template :D
Ready to test :D
from vue-table.
This is certainly nice to have! Ive tested the demo by @ratiw and it looks good. I think it should be optional, so one can enable editable features if needed as it may not be necessary for every instance.
from vue-table.
@mozami What I did was only add another event call cell-dblclicked
, no inline/in-place editing feature was added. The example just makes use of vue-editable component by registering it and call it from within cell-dblclicked
event.
I think in-place editing feature is not suitable for vuetable
but might be good for another component in the future.
from vue-table.
I don't see any Cons. What you mention as Con, is unavoidable. The mail purpose is to change server data!
Nice.
from vue-table.
@ratiw I have a problem. Ready updated the vue-table source, but now problem load data into table, event load-error is launch. Server call works (data is retrieve), but, the error even persist and not load data in table. No error in javascript console :(
index.blade.php
vue-table.blade.php
vuetable.js
crud.js
from vue-table.
@NightZpy Did you make any change to the template in the original vue-table.js
file? It seems like you separated them in different files and include them back in again using Blade template.
It's hard for me to help or make any suggestion based on what you do. Are you sure your data structure and pagination data returned from the server are in correct format? Please also try to dump the response
in vuetable:load-error
out to see more detail about it.
from vue-table.
Hi @ratiw, thanks for your support!
No, i don't make changes into vue-table.js.
Response from server (show in the network tab in chrome):
{ "total":10, "per_page":2, "current_page":1, "last_page":5, "next_page_url":"http:\/\/generator.developer.com\/api\/v1\/providers?page=2", "prev_page_url":null, "from":1, "to":2, "data":[ { "id":22, "code":"23423", "name":"aaa", "specialty":"234234", "district":"", "address":"", "phone":"", "movil1":"", "movil2":"", "contact":"", "email":"", "created_at":"2016-05-29 12:11:31", "updated_at":"2016-05-29 12:11:31", "deleted_at":null }, { "id":17, "code":"189905", "name":"lenyn", "specialty":"Programmer", "district":"", "address":"", "phone":"", "movil1":"", "movil2":"", "contact":"", "email":"", "created_at":"2016-05-29 08:11:01", "updated_at":"2016-05-29 08:13:49", "deleted_at":null } ] }
Dump response:
TypeError: r.call is not a function(…)
from vue-table.
I cut in parts, because browserify doen't works for me. Any suggestion for not cut template in a different file that js file?
It worked before upgrading to the new vue-table (with cell-dbclicked) :(
from vue-table.
@NightZpy If you don't modify anything, just use vue-table.js
in the src
directory. It's the main file I always work with as I usually don't use browserify as well.
Please also expand the error message to see more error info.
TypeError: r.call is not a function(…)
from vue-table.
Didn't error info into console, is dump data console.log(response).
This is all dump:
TypeError: r.call is not a function
at http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js:7:4256
Yes, i use vue-table.js.
But, require doesn't works for me :(
from vue-table.
This problem using babel with browserify: go
from vue-table.
@NightZpy This problem has already been discussed and solved. It's not the problem with browserify. It is because you split up vuetable files instead of using the one provided by the library in npm or bower.io. The package installed using npm or bower.io will have package.json that will tell browserify how to handle .vue
file.
from vue-table.
@NightZpy I suggest you start a small project trying to install vuetable via npm and compile with browserify or webpack first. Make it work before adding more things as it will confuse you.
from vue-table.
@NightZpy If you do not familiar with browserify, you do not need to use it. vuetable
can be used just by include its javascript file vue-table.js
. No compilation needed. Please see this example.
from vue-table.
@ratiw i understand you :D but, for example, when install directly from npm, cloning the repo, appear another problem about git repository in dependences section in package.json.
nightzpy@nightzpy-PC /cygdrive/d/Proyectos/Webs/vuetable-example-vueify-bootstrap-master
$ npm install --save-dev --no-optional
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: Cloning into 'C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2'...
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: fatal: '/cygdrive/c/Users/nightzpy/AppData/Roaming/npm-cache/_git-remotes/git-github-com-ratiw-vue-table-git-develop-b82b5a2f/C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f' does not appear to be a git repository
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: fatal: Could not read from remote repository.
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2:
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: Please make sure you have the correct access rights
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2: and the repository exists.
npm ERR! git clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2:
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\nodejs\\node.exe" "C:\\Users\\nightzpy\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "--no-optional"
npm ERR! node v4.4.5
npm ERR! npm v3.9.2
npm ERR! code 128
npm ERR! Command failed: git -c core.longpaths=true clone C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2
npm ERR! Cloning into 'C:\cygwin64\tmp\npm-8624-11be9644\git-cache-74f2aa38\9ef736e7057a22047ac27c94c24b5ebfb3fff3b2'...
npm ERR! fatal: '/cygdrive/c/Users/nightzpy/AppData/Roaming/npm-cache/_git-remotes/git-github-com-ratiw-vue-table-git-develop-b82b5a2f/C:\Users\nightzpy\AppData\Roaming\npm-cache\_git-remotes\git-github-com-ratiw-vue-table-git-develop-b82b5a2f' does not appear to be a git repository
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! D:\Proyectos\Webs\vuetable-example-vueify-bootstrap-master\npm-debug.log
I ready using directly include vue-table.js but, when update, now fail!
/----- UPDATE ------/
But, ready solve the problem, was a version of babel runtine ¬¬.
from vue-table.
@ratiw dbl-clicked event retrieve item element row with html tags for hightligh in searching!
{"id":22,"code":"<span class=\"highlight\">343</span>43","name":"aaa","specialty":"234234","district":"","address":"","phone":"","movil1":"","movil2":"","contact":"","email":"","created_at":"2016-05-29 12:11:31","updated_at":"2016-05-31 06:22:04","deleted_at":null}
Maybe clean data before pass to dbl-clicked event?
Temporal solution:
item = JSON.stringify(item);
item = item.replace('<span class=\\"highlight\\">',"").replace('</span>',"");
item = JSON.parse(item);
from vue-table.
@NightZpy That was the result of having reactivity. I suggest you remove the highlight functionality from your code as there is no way to remove that at the moment.
from vue-table.
@ratiw already remove :D but highlight functionality thats fine.
Thanks.
from vue-table.
Related Issues (20)
- Search with a extra data. HOT 6
- problem with scroll HOT 1
- Demo does not work in chrome HOT 4
- Error compiling template!!!! HELP ME!!! HOT 6
- Row totals HOT 3
- Is this an expected behavior of field callback?
- Can't style my grid to fit the content or a specific column HOT 2
- How use it for laravel HOT 1
- cell class cb
- Is it possible to add/del row dynamically? HOT 1
- unable to filter dates HOT 3
- No Data Available HOT 1
- Can I apply paging on client side? HOT 2
- Loading table with pre settings like sorting and page
- The word prev is spelled with the word next by mistake
- Pagination data not being transpile by polyfill
- Can i add `data-xxx` attribute to table head field? HOT 1
- http-fetch not showing data
- how to make columns resizable?
- How to use Cursor-Pagination
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-table.