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>

$( '#tt' ).tree({

onClick: function (node) { //菜单树的点击事件

//alert(node.attributes.url); // alert node text property when clicked

//接下来是添加一个tab

$( '#tabs' ).tabs( 'add' , {

title: node.text,

iconCls: 'icon-ok' ,

content: 'asdfsdfsdfsdfsd' ,

closable: true

});

}

});

视频下载地址：

外链资源： Easyui+asp.net mvc实用教程第01节 Easyui Mvc Sqlite介绍和三层的搭建

外链资源：第02节 Easyui的引入和搭建布局

外链资源： Easyui+asp.net mvc实用教程第03节

[北盟学习bamn.cn][Easyui+asp.net mvc实用教程] 第08节 tab动态显示一个独立的页面

http://pan.baidu.com/share/link?shareid=3973583294&uk=540184145

[北盟学习bamn.cn][Easyui+asp.net mvc实用教程] 第07节 Easyui的Tab的使用动态添加 tab 和easyui的事件方法属性的调用形式

http://pan.baidu.com/share/link?shareid=3981103915&uk=540184145

[北盟学习bamn.cn][Easyui+asp.net mvc实用教程] 第05节 Easyui的accordion的使用修改图标

http://pan.baidu.com/share/link?shareid=3986162885&uk=540184145

[北盟学习bamn.cn][Easyui+asp.net mvc实用教程] 第04节 Easyui的tree控件的使用 html形式 json形式和修改图标

http://pan.baidu.com/share/link?shareid=3992365026&uk=540184145

源码下载：http://www.bamn.cn/viewthread.php?tid=21&extra=page%3D1

第六集视频下载

第06节 Easyui的Tab的使用和菜单的点击事件菜单添加URL

http://pan.baidu.com/share/link?shareid=733465464&uk=540184145