(三)关于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).")";
?>