DataList是一个jquery插件。用来以卡片的形式显示数据。
一 步骤
1 包含datalist.js
2 在页面放置<div>或者<span>控件
<div id=”divList”></div>
3 在Javascript中使用下面的语句
$("#divList").datalist(options)
二 options参数的说明
属性
|
名称 |
类型 |
描述 |
缺省值 |
|
DataSource |
Array |
数据源 |
undefined |
|
DataKeyField |
String |
主键字段 |
“” |
|
RepeatColumns |
Int |
横向列数 |
4 |
|
width |
String |
宽度 |
“100%” |
|
cellpadding |
Int |
单元格内padding |
2 |
|
cellspacing |
Int |
单元格间距 |
0 |
|
border |
int |
表格线 |
0 |
|
ItemStyle |
Object |
单元样式 |
{class:””,style:””} |
|
class |
Css类名 |
||
|
style |
内嵌样式 |
||
|
AlternativeStyle |
Object |
交错单元样式(如未提供，则与ItemStyle相同) |
undefined |
|
class |
Css类名 |
||
|
style |
内嵌样式 |
||
|
ItemTemplate |
String |
单元模板 |
“”，详见ItemTemplate的说明 |
|
AlternativeItemTemplate |
String |
交错单元格模板（如未提供，与ItemTemplate相同） |
undefined |
方法
|
名称 |
参数 |
描述 |
|
loadData |
data |
重新绑定datalist |
|
options |
无 |
返回option对象 |
|
Items |
无 |
返回DataItem数组（见DataItem对象的说明） |
|
DataKeys |
无 |
返回关键字数组 |
事件
|
名称 |
参数 |
描述 |
|
onItemDataBound |
sender: 对象本身，即$(“#XXX”)e: DataListItemEvent对象（见DataListItemEvent对象的说明） |
数据源的每一项绑定到页面时发生 |
|
onItemCommand |
sender: 对象本身，即$(“#XXX”)e: DataListItemCommandEvent对象（见DataListItemCommandEvent对象的说明） |
点击模板中具有”CommandName”属性的控件时发生 |
DataListItem对象
属性
DataItem: 数据源相应的对象
ItemIndex: 序号
方法
FindControl(controlid) : 返回模板中controlid对应的元素
DataListItemEvent对象
属性
Item: DataListItem对象、
DataListItemCommandEvent对象
属性
Item: DataListItem对象
CommandName: 对应的CommandName
三 ItemTemplate的说明
ItemTemplate是必须要定义的，如果模板比较简单，可以直接在option参数中定义，如果比较复杂的话，可以在HTML中定义如下。
<div id=”divList”>
<ItemTemplate>这里是ItemTemplate的模板</ItemTemplate>
<AlternativeItemTemplate>这里是AlternativeItemTemplate的模板</AlternativeItemTemplate>
</div>
ItemTemplate和AlternativeItemTemplate的格式相同，可以直接写任何符合HTML标准的标记，同时支持以下扩展标记
data-bind: 标记的内容将用datasource中的值替换。格式为
propertyname1:$datafield1, propertyname2:$datafield2…
其中propertynameX是此控件关联的属性，datafieldX是数据源中包含的属性名。例如<input type=”text” data-bind=”value:’$name’” />,表示用数据源中的name这个属性对应的值替换textbox的value属性。注意：因为value是字符串属性，因此$name需要用引号扩起来。可以支持表达式，如data-bind=”value:’$firstname’ + ‘ ‘ + ‘$.lastname’”。
data-bind可以对应空白的属性值，例如<span id=”lblName” data-bind=””></span> 空白的属性值不会对控件产生直接的影响，但是可以用DataListItem.FindControl方法找到，否则的话无法找到。
CommandName: 有此属性值的控件，点击会激发onItemCommand事件
四 各种控件对应的data-bind属性
所有控件都支持的属性text,value,visible
Checkbox和radiobutton支持的属性 checked
<a>元素支持的属性 href
如果需要扩展内置的支持，例如需要对span元素添加color属性，则需要扩展$.fn.datalist.defaults.databind,方法如下：
$.extend(true,$.fn.datalist.defaults.databind, { "span": { "color": function (el, v) { el.css("color",eval(v))} } });
其中span为元素对应的tagName的小写形式，如果元素还有子类型，其格式为tagName-type, 例如checkbox的格式为input-checkbox。如果要对所有元素添加扩展支持,可以写作”default”
样例文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JScript/jquery-1.10.2.js" type="text/javascript"></script> <script src="../JScript/plugin/datalist.js" type="text/javascript"></script> <script language="javascript"> $(document).ready(function () { var data = [{ id: 1, name: "Michael", gender: "male", formal: true, color:"red" }, { id: 2, name: "Jason", gender: "male", formal: false , color:"yellow"}, { id: 3, name: "Mary", gender: "female", formal: false, color:"blue" }, { id: 4, name: "Holly", gender: "female", formal: true , color:"black"}, ]; $.extend(true,$.fn.datalist.defaults.databind, { "span": { "color": function (el, v) { el.css("color",eval(v))} } }); $("#dstList").datalist({ DataSource: data, RepeatColumns: 3, width: 200, ItemStyle: { style: "font:Arial" }, AlternativeItemStyle: { class: "MainList_AltItem" }, onItemCommand: function (sender, e) { alert(e.CommandName); alert(e.Item.ItemIndex); alert(sender.datalist("Items")[e.Item.ItemIndex].DataItem.id); }, onItemDataBound: function (sender, e) { var lnk = e.Item.FindControl("lnkDelete"); if (e.Item.DataItem.formal) lnk.text("Delete"); else lnk.text("Restore"); } }) }); </script> </head> <body> <form id="form1" runat="server"> <a href="ddd" class="menu1">aaaa</a> <div id=dstList> <ItemTemplate> Name:<span id=lblName data-bind="text:'$name',color:'$color'"></span> <input type="text" id="txtGender" data-bind="value:'$gender'" /><br /> <input type=radio id=opnGenderMale name="Gender" data-bind="checked:'$gender'=='male'"/>Male<input type=radio id=opnGenderFemale name="Gender" data-bind="checked:'$gender'=='female'"/>Female <input type=checkbox id=chkFormal data-bind="checked:$formal" />Formal <br /> <a data-bind="text:'$name',href:'UserList.aspx?ID=$id',visible:$formal"></a><br /> <a CommandName='Delete' href="javascript:void(0)" data-bind="" id="lnkDelete"></a> </ItemTemplate> </div> </form> </body> </html>
