浏览模式: 标准 | 列表分类:Javascript
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
| 阅读:26369
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
| 阅读:14820
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
| 阅读:14679
Submitted by gouki on 2017, January 25, 10:07 PM
nestable在点击的时候，有一个拖动的状态被触发，会导致你给nestable上加的链接都会无效。
只要在最外层的li里加入一个class为:dd-nodrag，就不会被触发了。然后你在子菜单中就可以为它们加入工具菜单了，比如编辑 、删除等。
又或者，你加入dd-handle，这样的话，只能点击最左侧的handle部位才能被拖动
参考 ：http://dbushell.github.io/Nestable/ 最下面
Javascript | 评论:0
| 阅读:19588
Submitted by gouki on 2016, May 4, 6:07 PM
select的placeholder其实是无效的。所以很多人想了一些奇技淫巧，比如利用HTML的标签：
XML/HTML代码
- <select>
- <option value="" disabled selected hidden>Please Choose</option>
- <option value="0">Open when powered (most valves do this)</option>
- <option value="1">Closed when powered, auto-opens when power is cut</option>
- </select>
这样就可以看得到，但点击下拉框的时候，就不在选项里了，可以到这里看效果：http://cssdeck.com/labs/hxovifav，
但其实这不应该出现在前端面前，prompt不就是针对select的吗？
select的placeholder的属性确实无效，它应该使用prompt！！！
象上面的代码就应该写成:
XML/HTML代码
<select prompt="Plaese Choose"> <option value="0"> 0 </option> <option value="1" 1 </option> </select>
很多资料里都应该有吧？
上面关于prompt的资料都错了。对不住各位，主要是在用Yii框架的时候，直接加入"prompt"属性就可以有这个效果，导致我这个对HTML不熟悉的人误解 了，经过@Deeka的指正，我发现，这是Yii自己的实现。比如：
PHP代码
- if (isset($tagOptions['prompt'])) {
- $prompt = $encode ? static::encode($tagOptions['prompt']) : $tagOptions['prompt'];
- if ($encodeSpaces) {
- $prompt = str_replace(' ', ' ', $prompt);
- }
- $lines[] = static::tag('option', $prompt, ['value' => '']);
- }
他自己实现了这么一条空信息，我没细看，对不住各位
Javascript | 评论:0
| 阅读:22132
