浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2018, December 13, 12:35 PM
基于昨天写的vue+blade+(vue-pjax-adapter)，发现没有任何进度提示，感觉比较不直观，但vue-pjax-adapter不能注入方法（或许是我不会）。
在app.js里引入了nprogress后。在axios请求前尝试注入，比如：
JavaScript代码
- window.axios.interceptors.request.use((config) => {
- console.log(before);
- NProgress.configure({easing: 'ease', speed: 1000, showSpinner: true});
- NProgress.start();
- return config;
- });
- window.axios.interceptors.response.use((response) => {
- NProgress.done();
- console.log(after);
- return response;
- }, (error) => {
- return Promise.reject(error);
- });
但是没有看到有任何需求。才尝试修改了一下vue-pjax-adapter插件
用法和vue-pjax-adapter完全一样：
XML/HTML代码
- import nPjaxAdapter from 'vue-nprogress-pjax';
- window.Vue.use(nPjaxAdapter);
- /**
- * 如果不是标准的pjax-container，就是这样使用
- * // window.Vue.use(nPjaxAdapter, {
- // targetSelector: '#my-custom-target',
- // });
- */
就这样简单。现在切换页面有进度条了
代码在这里：https://www.npmjs.com/package/vue-nprogress-pjax
Javascript | 评论:0
| 阅读:11710
Submitted by gouki on 2018, January 3, 11:18 PM
放到javascript里为实在是意外 。主要是这应该是属于前端的事情。
起因是这样的，一个checkbox，在没有选中前提交。POST过来的数据中。连checkbox对应的name的KEY，在$_POST中就不存在。这个就尴尬了。因为正常操作是form.submit()，或者是用$.post('xxx',$('#form').serializeArray())。这两种情况下，未选中的checkbox直接就消失在$_POST中了
表单的KEY比较多，将近20个（有点夸张，但是是事实）。如果一个个的写 var xxx = $('xxx:checked').val()||0; 这样也好痛苦的说~~
网上找了一下，看到这个：https://stackoverflow.com/questions/1809494/post-the-checkboxes-that-are-unchecked，
投票最高的居然是：
XML/HTML代码
- <form>
- <input type='hidden' value='0' name='selfdestruct'>
- <input type='checkbox' value='1' name='selfdestruct'>
- </form>
原理就是，如果selfdestruct有值，默认下面有值的会覆盖上面的。因为一个FORM里同名的key只能有一个。如果selfdestruct没有选中，那么就会用hidden里的值！
Javascript | 评论:0
| 阅读:13304
Submitted by gouki on 2017, October 16, 8:15 PM
jqweui是一个偷懒的基于Weui的组件，1.0的时候已经部分支持rem。所以用的还是比较多的。特别是我对它的部分组件有了一些扩展。而且它还有一些奇技淫巧。
1、如何通过函数来动态调整picker的内容。
默认情况下，picker/select在初始化的时候值已经固定了。这时候你其实是没有办法调整的，但不代表没有办法。虽然 API里没有提供，读了源码后你就能发现。其实你可以这样：
JavaScript代码
- $('#xxx').val('').data('weui-select',false).select({
- title: "其他值",
- items: ["1","2"]
- });
记得有一个恶心的地方，items里的值不能是数字！！！
2、添加清除功能，默认的select/picker在选择后就不能清除了（当然你可以在items的第一个值设置为空）。所以我简单的扩展了一下：https://github.com/lihongxun945/jquery-weui/issues/443。
无非就是加个文字，加个清除等等。。
3、picker/select在使用的时候，有时候会显示一个软键盘而无法删除和隐藏。这时候的解决办法其实就是在input上面加上onfocus="this.blur()"即可！
Javascript | 评论:2
| 阅读:27052
Submitted by gouki on 2017, September 16, 10:03 AM
说实话，在datatables里，我觉得这个回复挺重要的！https://datatables.net/forums/discussion/33723/new-user-help-columns-vs-columndefs-for-client-side-rendering-of-ajax-data
提问：
XML/HTML代码
- Hi,
-
- I'm a beginner with DataTables. I'm trying to use DataTables AJAX to pull records from the server (an ASP.NET MVC app.) Each record coming from the server has name, address line 1, address line 2, city, state, zip. I want my table to combine and format all those fields into one column on the client.
-
- My questions are:
- 1. Would I use columns.render, or columnDefs.render?
- 2. Do I need both columns and columnDefs?
- 3. Do I need to specify either the table column name (e.g., NameAndAddress) in "columns", or do I need to list each field coming back from the server?
- 4. How do I use "targets"? Does "targets" refer to the column in the displayed table, or the column under "columns"?
-
- Thanks for your help. I've been though the documentation a few times and I'm still confused about columns vs. columnDefs.
回答：
"columns" & "columnsDefs" ultimately serve the same purpose.
The differences being:
- "columns" requires you to provide a configuration or null for all columns. "columnDefs" requires you to only proved configuration for columns that have "special" configurations
- I have found "columns" best used if handling array of strings as your rows. I have found "columnDefs" best used if handling objects as your rows
"targets" takes a single string or int value, or array of previous two to denote which columns this configuration is for. I suggest using column class instead of column # in the event you want to use ColReorder extension.
Here are examples of how I have configured columns in my application.
HTML：
XML/HTML代码
- <th class="actionsCol no-print">Actions</th>
- <th class="StatusCol">Status</th>
- <th class="IsFinalCol">Final<br>Plan</th>
- <th class="VrsnCol">Vrsn</th>
- <th class="CutCntCol">Cut<br>Cnt</th>
- <th class="CarCntCol">Car<br>Cnt</th>
JS关键代码：
JavaScript代码
- "columnDefs": [
- {
-
- "targets": 'actionsCol',
- "sorting": false,
- "orderable": false,
- "type":"html",
- "width": "8%",
- className: "dt_nowrap_col no-print",
- "render": function (data, type, row) {
- return $.jqote(yv.templates.action_icons, data);
- }
- },
- {
- "targets": ['IsFinalCol','CutCntCol','CarCntCol','VrsnCol','StatusCol'],
- "width": "5%"
- },
- etc
- ]
看到这些定义，估计你应该能够想得出如何更好的应用了吧？
----EOF---
其他参考 ：
Javascript | 评论:0
| 阅读:15544
Submitted by gouki on 2017, September 16, 9:08 AM
datatables现在也开始逐步用的多了。虽然用起来复杂了一点，但好歹还能减少一些开发量
1、语言包，这个就不用说了，直接找个中文语言包即可（就是有些用插件的要注意一下，还是多写）
2、表格居中居右，这些不太好控制 ，但可以在每个columns里定义一个：sClass，这时候你就想怎么样就行了。例
{data:"xxx",sClass:"text-right"}
然后你加一个样式.text-right{text-align:right}
轻轻松松
3、POST，默认datables的数据是用GET请求，如果你参数过多，会造成GET参数过长的问题，这时候就只能用POST了。只是用了POST，数据就没有缓存了（可以用cache自己处理，但是麻烦）
4、columns的render可以写自定义事件。能封装起来一起用是最好的，毕竟每个页面的每个表格的Render都有可能会复用，要是每个地方都写同一份就太累了
5、事件，这一块说容易 也容易 也麻烦也麻烦。还是根据实际情况吧。反正你只要 保持你在Render的时候将每行数据的主键写出来，到时候想怎么处理都OK
Javascript | 评论:0
| 阅读:15317
