(三)关于kendo IU表单form各类控件的数据绑定

=====================input textarea=============================
<div id="view">
<input data-bind="value: inputValue" />
<textarea data-bind="value: textareaValue"></textarea>
</div>
<script>
var viewModel = kendo.observable({
inputValue: "Input value",
textareaValue: "Textarea value"
});
kendo.bind($("#view"), viewModel);
</script>
备注:
当触发事件时才执行绑定，需要在input或textarea标签里加
data-value-update="keyup"
或
data-value-update="keypress"
=====================textarea,dropdownlist=============================
<select data-text-field="name" data-value-field="id" data-bind="source: products,value:names" multiple="multiple"></select>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
],
names: ["Tea","Juice"],
});
kendo.bind($("select"), viewModel);
备注:绑定的value:names在绑定的source: products生效前会失效，所以两个不能同时用，只能通过在绑定source: products后用jquery实现:
$("select").val(["Tea","Juice"]);
</script>
===============
Kendo UI dropdown list级联菜单刷新：
在父dropdown list上绑定change事件函数：change : onItemChange
在函数中刷新更新子dropdow list的数据源(data source)
var subDDList = $('#subListDiv').data("kendoDropDownList");
subDDList.setDataSource(buildSubList(selectParentId));
=====================select=============================
<select data-bind="source: colors"></select>
<script>
var viewModel = kendo.observable({
colors: [ "Red", "Green", "Blue" ]
});
kendo.bind($("select"), viewModel);
</script>
=====================
<select data-text-field="name" data-value-field="id" data-bind="source: products"></select>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
kendo.bind($("select"), viewModel);
</script>
====================================上传组件==========================================
上传文件对话框使用
$("#selectedFiles").kendoUpload({
async: {
saveUrl:  "myDomain/fileUpload.htm",
autoUpload: true
},
multiple:true, // 支持多个文件上传,
complete: uploadFileComplete, //上传结束以后处理,
error: onError,
cancel: onCancel,
select: onSelect,
success: onSuccess
});
调用代码 $("#selectedFiles ").click();//模拟鼠标双击事件调用,
页面上selectedFileshtml元素为隐藏对象。

=========================checkbox多选框绑定==================================
<input type="checkbox" value="Red" data-bind="checked: colors" />Red
<input type="checkbox" value="Green" data-bind="checked: colors" />Green
<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
<script>
var viewModel = kendo.observable({
colors: ["Red","Green"]
});

kendo.bind($("input"), viewModel);
</script>
=======================
<input type="checkbox" data-bind="checked: isChecked" />
<script>
var viewModel = kendo.observable({
isChecked: false
});

kendo.bind($("input"), viewModel);
</script>
=========================rado单选按钮绑定==================================
<input type="radio" value="Red" name="color" data-bind="checked: selectedColor" />Red
<input type="radio" value="Green" name="color" data-bind="checked: selectedColor" />Green
<input type="radio" value="Blue" name="color" data-bind="checked: selectedColor" />Blue
<script>
var viewModel = kendo.observable({
selectedColor: "Green"
});

kendo.bind($("input"), viewModel);
</script>
=========================UL LI模板绑定==================================
<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li>
id: <span data-bind="text: id"></span>
name: <span data-bind="text: name"></span>
</li>
</script>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});

kendo.bind($("ul"), viewModel);
</script>
===========================UL LI模板一维数组数据绑定=========================
<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li data-bind="text: this"></li>
</script>
<script>
var viewModel = kendo.observable({
products: [ "Coffee", "Tea", "Juice" ]
});

kendo.bind($("ul"), viewModel);
</script>
=====================span text=============================
<span data-bind="text: name"></span>
<script>
var viewModel = kendo.observable({
name: "John Doe"
});
kendo.bind($("span"), viewModel);
</script>
=====================span html==============================
<span data-bind="html: name"></span>
<script>
var viewModel = kendo.observable({
name: "<strong>John Doe</strong>"
});
kendo.bind($("span"), viewModel);
</script>
=====================invisible 显示不显示==============================
<div id="view">
<div data-bind="invisible: isInvisible">some content</div>
<button data-bind="click: show">Show</button>
</div>

<script>
var viewModel = kendo.observable({
isInvisible: true,
show: function () {
this.set("isInvisible", false);
}
});
kendo.bind($("#view"), viewModel);
</script>

=====================disabled 有效没有效==============================
<div id="view">
<input type="text" data-bind="value: name, disabled: isNameDisabled" />
<button data-bind="click: disableInput">Disable</button>
</div>
<script>
var viewModel = kendo.observable({
isNameDisabled: false,
name: "John Doe",
disableInput: function () {
this.set("isNameDisabled", true);
}
});

kendo.bind($("#view"), viewModel);
</script>
=======================style 动态改变样式===============================
<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},text: price"></span>
<script>
var viewModel = kendo.observable({
price: 42,
priceColor: function() {
var price = this.get("price");
if (price <= 42) {
return "#00ff00";
} else {
return "#ff0000";
}
},
priceFontWeight: function() {
var price = this.get("price");
if (price <= 42) {
return "bold";
} else {
return "";
}
}
});
kendo.bind($("span"), viewModel);
</script>
要注意的是CSS属性的名称，如果CSS名称中含有连字符（-），比如font-weight, font-size ,background-color等，在使用时需要省略到连字符，使用camel风格的命名，如fontWeight, fontSize,backgroundColor等。
========================上层绑定=============================
<div data-template="div-template" data-bind="source: person">
<script id="div-template" type="text/x-kendo-template">
Name: <span data-bind="text: name"></span>
</script>
</div>
<script>
var viewModel = kendo.observable({
person: {
name: "John Doe"
}
});
kendo.bind($("div"), viewModel);
</script>
========================上层单维数据绑定=============================
<div data-template="div-template" data-bind="source: this">
<script id="div-template" type="text/x-kendo-template">
Name: <span data-bind="text: name"></span>
</script>
</div>
<script>
var viewModel = kendo.observable({
name: "John Doe"
});

kendo.bind($("div"), viewModel);
</script>

========================属性绑定=============================
<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
imageSource: "http://www.kendoui.com/image/kendo-logo.png",
imageAlt: "Kendo Logo"
});

kendo.bind($("#logo"), viewModel);
</script>
========================
<div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>
<script>
var viewModel = kendo.observable({
fooValue: "foo",
barValue: "bar"
});
kendo.bind($("div"), viewModel);
</script>
========================最后介绍远程数据=============================
<script>
var sharableDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data-service.json",
dataType: "json"
}
}
});

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://t.sogx.cn/api/data/getQzxx.php",
dataType: "jsonp",
data: {
q: "html5"
}
}
},
schema : {
data : function(d) {
return d.data;   //响应到页面的数据
},
total : function(d) {
return d.count;   //总条数
}
}
});

var viewModel = kendo.observable({
products=dataSource;
});

kendo.bind($("div"), viewModel);
</script>
====================
<?php
header('Content-Type:text/html;charset=GB2312');
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:x-requested-with");
include("d:/www.qmlt.com/global.php");
require(MODEL_PATH.'class/common.php');
$db->query("set character set 'GB2312'");
$db->query("set names 'GB2312'");
$q=$_GET['q'];
if($q==""){
$sql="select id,name from qm_industry";
}else{
$sql="select id,name from qm_job_class where keyid='$q'";
}
$ku=$db->query($sql);
$result=array();
$i=0;
while($rs=$db->fetch_array($ku)){
$result['data'][$i]['id']=$rs[id];
$result['data'][$i]['name']=(trim(u($rs[name]))!="")?u($rs[name]):"(未命名)";
$i++;
}
$result['count']=$i;
echo  $_GET['callback']."(".json_encode($result).")";
?>