backbone与easyui的datagrid配合使用

最新推荐文章于 2025-09-07 21:17:08 发布

转载最新推荐文章于 2025-09-07 21:17:08 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smallbaby/p/3428140.html

文章标签：

#前端 #测试 #javascript #ViewUI

本文介绍了一个项目中如何在前端使用Backbone.js作为MVC框架，与EasyUI进行结合开发的经验分享，包括HTML页面、JS代码实现及效果展示。

有个项目前端想使用流行的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();
});