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

時間 2019-12-20

標籤 easyui asp.net asp mvc sqlite 開發教程適合入門欄目 ASP 简体版

原文原文鏈接

第一節：javascript

前言（技術簡介）php

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

如今愈來愈多的企業用它來開發web系統

extjs (功能很強大可是很是複雜速度我感受也沒有 easyui快)

easyui （比較適合初學者小巧並且速度感受仍是能夠相對ext來講）

ASP.NET MVC

Sqlite 數據庫

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

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

物理框架是 win7 64位

邏輯框架三層 data business UIcss

MVC ASP.NET MVC

MVC 是在 .net 3.5 之後纔有的一個東西 html

下載easyui

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

在asp.net MVC中添加 easyui前端

第二節：java

建立一個home頁的viewnode

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

<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的 layoutweb

<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>