易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

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

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": [
{
// This is for the Action column icons
"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---

其他参考：

https://datatables.net/reference/option/columns.render#Examples

Javascript | 评论:0 | 阅读:17145

datatables的一些常用的玩意

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 | 阅读:17018

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

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 | 阅读:21509

select 的 placeholder

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' => '']);
}

他自己实现了这么一条空信息，我没细看，对不住各位