手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

post的奇技淫巧:Post the checkboxes that are unchecked

 放到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代码
  1. <form>  
  2.   <input type='hidden' value='0' name='selfdestruct'>  
  3.   <input type='checkbox' value='1' name='selfdestruct'>  
  4. </form>  
原理就是,如果selfdestruct有值,默认下面有值的会覆盖上面的。因为一个FORM里同名的key只能有一个。如果selfdestruct没有选中,那么就会用hidden里的值!
 
 
 
 

jqweui 的 select/picker 控件添加清除

 jqweui是一个偷懒的基于Weui的组件,1.0的时候已经部分支持rem。所以用的还是比较多的。特别是我对它的部分组件有了一些扩展。而且它还有一些奇技淫巧。

1、如何通过函数来动态调整picker的内容。

默认情况下,picker/select在初始化的时候值已经固定了。这时候你其实是没有办法调整的,但不代表没有办法。虽然 API里没有提供,读了源码后你就能发现。其实你可以这样:

JavaScript代码
  1. $('#xxx').val('').data('weui-select',false).select({  
  2.                   title: "其他值",  
  3.                   items: ["1","2"]  
  4.               });  

记得有一个恶心的地方,items里的值不能是数字!!!

2、添加清除功能,默认的select/picker在选择后就不能清除了(当然你可以在items的第一个值设置为空)。所以我简单的扩展了一下:https://github.com/lihongxun945/jquery-weui/issues/443。

无非就是加个文字,加个清除等等。。

3、picker/select在使用的时候,有时候会显示一个软键盘而无法删除和隐藏。这时候的解决办法其实就是在input上面加上onfocus="this.blur()"即可!

New user help: columns vs. columnDefs for client side rendering of AJAX data

 说实话,在datatables里,我觉得这个回复挺重要的!https://datatables.net/forums/discussion/33723/new-user-help-columns-vs-columndefs-for-client-side-rendering-of-ajax-data

 
提问:
XML/HTML代码
  1. Hi,  
  2.   
  3. 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.  
  4.   
  5. My questions are:  
  6. 1. Would I use columns.render, or columnDefs.render?  
  7. 2. Do I need both columns and columnDefs?  
  8. 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?  
  9. 4. How do I use "targets"? Does "targets" refer to the column in the displayed table, or the column under "columns"?  
  10.   
  11. 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:

  1. "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
  2. 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代码
  1. <th class="actionsCol no-print">Actions</th>  
  2. <th class="StatusCol">Status</th>  
  3. <th class="IsFinalCol">Final<br>Plan</th>  
  4. <th class="VrsnCol">Vrsn</th>  
  5. <th class="CutCntCol">Cut<br>Cnt</th>  
  6. <th class="CarCntCol">Car<br>Cnt</th>  
JS关键代码:
JavaScript代码
  1. "columnDefs": [  
  2.                {  
  3.                     // This is for the Action column icons  
  4.                     "targets"'actionsCol',  
  5.                     "sorting"false,  
  6.                     "orderable"false,  
  7.                     "type":"html",  
  8.                     "width""8%",  
  9.                     className: "dt_nowrap_col no-print",  
  10.                     "render"function (data, type, row) {  
  11.                         return $.jqote(yv.templates.action_icons, data);  
  12.                     }  
  13.                 },  
  14.                 {  
  15.                     "targets": ['IsFinalCol','CutCntCol','CarCntCol','VrsnCol','StatusCol'],  
  16.                     "width""5%"  
  17.                 },  
  18. etc  
  19. ]  
 
看到这些定义,估计你应该能够想得出如何更好的应用了吧?
----EOF---
 
其他参考 :
https://datatables.net/reference/option/columns.render#Examples
 

datatables的一些常用的玩意

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

jquery的nestable组件在点击时如何不被拖动

nestable在点击的时候,有一个拖动的状态被触发,会导致你给nestable上加的链接都会无效。

只要在最外层的li里加入一个class为:dd-nodrag,就不会被触发了。然后你在子菜单中就可以为它们加入工具菜单了,比如编辑 、删除等。
 
又或者,你加入dd-handle,这样的话,只能点击最左侧的handle部位才能被拖动
参考 :http://dbushell.github.io/Nestable/ 最下面
 
Records:24412345678910»