SmartClient之Data Binding

最新推荐文章于 2020-07-10 10:07:34 发布

lanjie_gunger

最新推荐文章于 2020-07-10 10:07:34 发布

阅读量374

点赞数

分类专栏： SmartClient

本文链接：https://blog.csdn.net/lanjie_gunger/article/details/50835244

版权

SmartClient 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

两种绑定方式：

1、自动：当用户滚动列表时，一个绑定数据源的ListGrid会自动执行fetch操作

2、手动：当用户滚动列表时，调用removeSelectedData()方法

使用fields来定义数据组件或者数据源，这也分为两种

1、组件域（Component field）：数据源组件的代表属性，比如标题，宽度等

2、数据源域（datasource field）：对数据源的元语言描述，比如数据类型，数据长度等

component field例子：

isc.ListGrid.create({
ID: "contactsList",
left: 50, top: 50,
width: 300,
fields: [
{name:"salutation", title:"Title"},
{name:"firstname", title:"First Name"},
{name:"lastname", title:"Last Name"}
]
})
其中，name是键，title是值

效果：

接下来就可以使用data属性去给相应的name添加数据，（缺点：静态数据，动态的话就不行了）如下

data: [
{salutation:"Ms", firstname:"Kathy", lastname:"Whitting"},
{salutation:"Mr", firstname:"Chris", lastname:"Glover"},
{salutation:"Mrs", firstname:"Gwen", lastname:"Glover"}
]

效果图：

还可以控制表单组件的样式editorType，默认是文本样式，比如

isc.DynamicForm.create({
ID: "contactsForm", left: 50, top: 250, width: 300,
fields: [
{name:"salutation", title:"Title", editorType: "select",
valueMap:["Ms", "Mr", "Mrs"]
},
{name:"firstname", title:"First Name"},
{name:"lastname", title:"Last Name"},
{name:"birthday", title:"Birthday", editorType:"date"},
{name:"employment", title:"Status", editorType:"radioGroup",
valueMap:["Employed", "Unemployed"]
},
{name:"bio", title:"Biography", editorType:"textArea"},
{name:"followup", title:"Follow up", editorType:"checkbox"}
]
})

效果图：

DataSource

两个基本的规则：

1、DataSource必须有一个唯一的ID

2、每个field必须指定一个name，一个type，以及有一个field需标记primaryKey="true"（为了增删改）

例子：

<DataSource ID="contactsDS">
<fields>
<field primaryKey="true" name="id" hidden="true"
type="sequence" />
<field name="salutation" title="Title" type="text" >
<valueMap>
<value>Ms</value>
<value>Mr</value>
<value>Mrs</value>
</valueMap>
</field>
<field name="firstname" title="First Name" type="text" />
<field name="lastname" title="Last Name" type="text" />
<field name="birthday" title="Birthday" type="date" />
<field name="employment" title="Status" type="text">
<valueMap>
<value>Employed</value>
<value>Unemployed</value>
</valueMap>
</field>
<field name="bio" title="Bio" type="text" length="2000" />
<field name="followup" title="Follow up" type="boolean" />
</fields>
</DataSource>

于是乎，一个组件就可以引用这个datasource了，而不用通过fields属性来定义。例子：

<%@ taglib uri="isomorphic" prefix="isomorphic" %>
<HTML><HEAD>
<isomorphic:loadISC />
</HEAD><BODY>
<SCRIPT>
<span style="color:#FF0000;"><isomorphic:loadDS ID="contactsDS" /></span>
isc.ListGrid.create({
ID: "contactsList",
left: 50, top: 50,
width: 500,
<span style="color:#FF0000;">dataSource: contactsDS</span>
});
isc.DynamicForm.create({
ID: "contactsForm",
left: 50, top: 200,
width: 300,
<span style="color:#FF0000;">dataSource: contactsDS</span>
});
</SCRIPT>
</BODY></HTML>

同样的，组件类型也会根据他们的datasource自动匹配，如下：可以通过 editorType来手动进行更改

datasource的四种操作

例子：

contactsDS.addData(
{salutation:"Mr", firstname:"Steven", lastname:"Hudson"},
"say(data[0].firstname + 'added to contact list')",
{prompt:"Adding new contact..."}
);
or
contactsList.fetchData(
{lastname:"Glover"}
);

DataSource operations will only execute if the DataSource is bound to a persistent data store.
组件的也有一些方便的操作方法：

开发流程：

1、创建.ds.xml文件<datasource></datasource>

2、和真实数据库联系起来

3、在jsp中isomorphic:loadDS

4、创建组件

5、将datasource绑定到组件上，通过dataSource属性或者 setDataSource() 方法

6、写组件的fields部分，描述组件本身的一些属性

7、调用组件的方法去操作数据

lanjie_gunger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SmartClient之Data Binding

两种绑定方式：1、自动：当用户滚动列表时，一个绑定数据源的ListGrid会自动执行fetch操作2、手动：当用户滚动列表时，调用removeSelectedData()方法使用fields来定义数据组件或者数据源，这也分为两种1、组件域（Component field）：数据源组件的代表属性，比如标题，宽度等2、数据源域（datasource field）：对数据源的元语言描
复制链接

扫一扫

专栏目录