<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="easyui.css"><link rel="stylesheet" type="text/css" href="icon.css"><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script><script type="text/javascript" src="knockout-2.2.1.js"></script><script type="text/javascript">//预编译函数， 可以定义在另一个js文件中(function(){ //自定义绑定ko.bindingHandlers.mydatagrid={ update:function (element, viewModelAccessor, allBindings) { //得到当前绑定的modelvar viewModel = viewModelAccessor();$(element).datagrid({ url:viewModel.url,columns:viewmodel.columns})}}})();
</script></head>
<body><h2>Basic DataGrid</h2><p>The DataGrid is created from markup, no JavaScript code needed.</p><div style="margin:20px 0;"></div><table id="tt" title="Basic DataGrid" style="width:700px;height:250px" data-bind="mydatagrid:grid"> </table><script type="text/javascript">
var viewmodel = function() { this.grid={ url:'mydata.json', columns:[{field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'}] }};ko.applyBindings(new viewmodel());<!--easyui的写法
$('#tt').datagrid({ url:'mydata.json', <!--跨域请求 在chrome的快捷方式上添加 --allow-file-access-from-files --> columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); --></script>
</body></html>