Easyui + asp.net mvc + sqlite 開發教程（錄屏）適合入門

本文轉載自查看原文 2013-08-10 11:18 15239

第一節：

前言（技術簡介）

EasyUI 是一套 js的前端框架利用它可以快速的開發出好看的前端系統 web 它是在jquery的框架基礎上面

現在越來越多的企業用它來開發web系統

extjs (功能很強大但是非常復雜速度我感覺也沒有 easyui快)

easyui （比較適合初學者小巧而且速度感覺還是可以相對ext來說）

ASP.NET MVC

Sqlite 數據庫

（一個小型的數據庫不用安裝很多單機軟件利用他來做數據保存）

工具動軟代碼生成器 IDE(VS2010)

物理框架是 win7 64位

邏輯框架三層 data business UI

MVC ASP.NET MVC

MVC 是在 .net 3.5 以后才有的一個東西

下載easyui

外鏈資源： easyui下載地址：http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.2.zip

在asp.net MVC中添加 easyui

第二節：

創建一個home頁的view

index.aspx 在里面添加easyui的應用支持（添加js 和css）

<script src="../../Content/Easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="../../Content/Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Easyui/themes/icon.css" rel="stylesheet" type="text/css" />

布局我們使用 easyui的 layout

<body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:40px;background:#0099C8;padding:10px">logo</div>
        <div data-options="region:'west',split:true,title:'菜單欄'" style="width:150px;padding:10px;">
       <ul id="tt"></ul>  
    </div>
        <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px;">北盟學習社區 當前登錄人： admin</div>
        <div data-options="region:'center',title:'Center'"></div>
    <script type="text/javascript">
        $('#tt').tree({
            url: '/Prim/Index',
            checkbox: true
        });  
    </script>
</body>

這樣一個簡單的布局就搞定了

easyui 布局的時候我們要修改layout panel的一些樣式

但這里有一點要注意的就是五個region 其他都可以沒有但是 “'center',title:'” 這個必須有

<div data-options="region:'north',border:false" style="height:40px;background:#0099C8;padding:10px">logo</div>
        <div data-options="region:'west',split:true,title:'菜單欄'" style="width:150px;padding:10px;">
       <ul id="tt"></ul>  
    </div>
        <div data-options="region:'south',border:false" style="height:20px;background:#ccc;padding:1px;">北盟學習社區 當前登錄人： admin</div>
        <div data-options="region:'center',title:'Center'"></div>