backbone与easyui的datagrid配合使用

有个项目前端想使用流行的mvc框架来开发,调研了下，感觉backbone.js比较合适..mvc划分清晰.使用方便。为了开发进度，前端富客户端使用easyui来搭建,这样就出现了backbone和easyui如果结合使用的问题..经过几天的调研，在同事的帮助下，终于能够不完美的结合使用了..后续再修改、优化..

html页面：

<!DOCTYPE html>
<html>
<head>
    <title>the5fire-backbone-model</title>
		<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
		<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
		<script src="jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
		<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
		<script src="backbone/Underscore.js" type="text/javascript"></script>
		<script src="backbone/Backbone.js" type="text/javascript"></script>
		<script src="js/t.js" type="text/javascript"></script>
</head>
<body>
	<div id="placeholder"></div>​
         <!-- backbone 的templete -->
	<script type="text/html" id="layout-template">

　　　　　　<table id="tbList" cellspacing="0" cellpadding="0">  
　　　　　　</table>  

	</script>
</body>
</html>

t.js代码

$(document).ready(function() {
　　// Model
    var Person = Backbone.Model.extend({});
　　// Collection
    var PersonCollection = Backbone.Collection.extend({
        mondel:Person,
　　　　 // Test是个servlet，返回json测试数据
        url:"Test"
    
    });
    var PersonView = Backbone.View.extend({
       //View对应到dom
        el: $("#placeholder"),
        dg:null,
        p:null,
        initialize: function() {
            p = new PersonCollection(); 
            p.bind('reset', this.addAll, this);
            p.fetch({silent: true,reset:true,
             success:function(collection,response){
                    collection.reset(collection.models);
                    }});    
        },
        render: function(){
            var template = $("#layout-template").html();
            var content = _.template(template, {});
            this.$el.append(content);
            this.dg = this.$el.find('#tbList').datagrid({
                      title :"easyui-datagrid列表",
                      height:"auto",
                      singleSelect:false,//是否单选 
                      pagination:true,//分页控件
                      rownumbers:true,//行号  
                      columns:[[
                          {field:'f1',title:'姓名',width:100},
                          {field:'f2',title:'年龄',width:100},
                          {field:'f3',title:'备注',width:100,formatter:function(dgg,row,is) {
                              return "Hello,World!!";
                          }}
                      ]],
                      toolbar: [{  
                            text: '添加',  
                            iconCls: 'icon-add',  
                            handler: function() {  
                                openDialog("add_dialog","add");  
                            }  
                        }]
                    }); 
        },
        addAll:function(persons) {
            var self = this; 
            persons.each(function(person){
                 self.dg.datagrid("insertRow",{row:person.attributes});
             });
        }
    });
    var personView = new PersonView();
    // 渲染
    personView.render();
});

效果图：

　　待续....

posted on 2013-11-18 14:41  孤独的皮蛋  阅读(936)  评论(1)  编辑  收藏  举报

导航