Datalist插件的使用说明

DataList是一个jquery插件。用来以卡片的形式显示数据。

一 步骤

1 包含datalist.js

2 在页面放置

或者 控件

 <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>

ItemTemplate和AlternativeItemTemplate的格式相同，可以直接写任何符合HTML标准的标记，同时支持以下扩展标记

data-bind: 标记的内容将用datasource中的值替换。格式为

   propertyname1:$datafield1, propertyname2:$datafield2…

其中propertynameX是此控件关联的属性，datafieldX是数据源中包含的属性名。例如,表示用数据源中的name这个属性对应的值替换textbox的value属性。注意：因为value是字符串属性，因此$name需要用引号扩起来。可以支持表达式，如data-bind=”value:’$firstname’ + ‘ ‘ + ‘$.lastname’”。

data-bind可以对应空白的属性值，例如 空白的属性值不会对控件产生直接的影响，但是可以用DataListItem.FindControl方法找到，否则的话无法找到。

CommandName: 有此属性值的控件，点击会激发onItemCommand事件

四 各种控件对应的data-bind属性

所有控件都支持的属性text,value,visible

Checkbox和radiobutton支持的属性 checked

元素支持的属性 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”

样例文件

<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>

<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>