<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件基础</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<template id="son">
<div>
<h1>my-son</h1>
<h3>{{ title }}</h3>
<button @click="test">test $emit()</button>
</div>
</template>
<template id="father">
<div>
<h1>my-father</h1>
<!-- 监听子组件发射的 test 事件 -->
<my-son title="test props" @test="test"></my-son>
</div>
</template>
<script src="https://vuejs.org/js/vue.js"></script>
<script>
// 一 、新建组件
// 使用组件的第一步就是新建组件
// 全局组件 ：使用 Vue.component() 新建的组件是全局组件
// 局部组件 ：使用 components 属性挂载子组件
// Vue.extend() ：可以新建一个组件对象
// 二 、组件的复用
// 组件的 data 必须是一个函数
// 因为组件复用时使用的是同一个组件实例 ，如果 data 作为一个引用类型的值的话 ，所有的组件将引用同一个 data
// 三 、props 自定义组件特性
// props 属性可以为组件自定义特性
// 当一个值传递给一个 prop 特性的时候 ，它就会变成组件实例的一个属性
// 四 、根元素
// 每个组件只能拥有一个根元素
// 五 、监听子组件事件
// 组件可以使用 $emit() 方法发射一个事件 ，然后在父组件中监听这个事件
// 六 、组件名大小写
// 定义组件名的方式有两种
// 使用 kebab-
case ：Vue.component(
'my-component-name', { /* 
*/ })
// 使用 PascalCase ：Vue.component(
'MyComponentName', { /* */ })
// 不管组件名使用的是 kebab-
case 还是 PascalCase ，对应的标签名都是 <my-component-name>
// 第一步 ：新建一个 my-son 组件对象
let MySon = Vue.extend({
template:
'#son',
// 第四步 ：自定义组件特性
// 使用子组件的时候就可以使用 v-bind 为特性设置值了
props: [
'title'],
methods: {
test(){
// 发射一个 test 事件
this.$emit(
'test')
}
}
})
// 第二步 ：新建一个 my-father 全局组件
Vue.component(
'my-father', {
template:
'#father',
// 第三步 ：使用 components 属性挂载子组件
components: {
MySon
},
methods: {
test(){
alert(
'说点什么好呢')
}
}
})
// 第三步 ：定义根组件
new Vue({
}).$mount(
'#app')
</script>
</body>
</html>
通过Bootstrap快速构建表格样式：
（1）外部引入Bootstrap文件
<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>
（2）通过HTML代码，创建一个表格
接下来通过外部引入Bootstrap来快速构建表格样式
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
除此之外，我们还可以给表格添加背景颜色。具体代码如下
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作
<table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
<thead>
<tr class="active">
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>示例一</td>
<td>示例一</td>
<td>示例一</td></tr>
<tr class="warning">
<td>示例二</td>
<td>示例二</td>
<td>示例二</td></tr>
<tr class="danger">
<td>示例三</td>
<td>示例三</td>
<td>示例三</td></tr>
</tbody>
</table>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<webServices>
<protocols>
<add name= "HttpPost"/>
<add name= "HttpGet"/>
<add name="HttpSoap"/>
<add name="Documentation"/>
</protocols>
</webServices>
</system.web>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with"/>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
/// <summary>
///WebService 的摘要说明http://localhost:65497/
/// </summary>
//[WebService(Namespace = "http://tempuri.org/")]
[WebService(Namespace = "http://localhost:65497/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
Context.Response.AppendHeader("Access-Control-Allow-Methods", "OPTIONS,POST,GET");
Context.Response.AppendHeader("Access-Control-Allow-Headers", "x-requested-with");
Context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
return "Hello World";
}
[WebMethod]
public string GetAge(string id)
{
Context.Response.AppendHeader("Access-Control-Allow-Methods", "OPTIONS,POST,GET");
Context.Response.AppendHeader("Access-Control-Allow-Headers", "x-requested-with");
Context.Response.AppendHeader("Access-Control-Allow-Origin", "*");
Context.Response.AppendHeader("Content-type", "application/json");
return "ID为:" + id + "的年龄为:" + new Random().Next(10, 41);
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src=" http://libs.baidu.com/jquer77777y/1.11.1/jquery.min.js "></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(
function () {
$("#getdata").click(
function () {
/*
$.ajax({
type: 'Post',
url: 'http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=3344',
// data: '{id:"bbut101"}',
// data: 'id=bbut101',
// dataType: 'json',
dataType: 'xml',
contentType: "application/json",
success: function (data) {
$("#data").append(data.d);
}
});
*/ // alert("3333333333");
// htmlobj = $.ajax({ url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge", async: false });
// $("#data").html(htmlobj.responseText);
/*
// $.post("http://localhost:65497/WebSite1/WebService.asmx/GetAge",
{ id: "Duckburg" },
function (data, status) {
alert("数据：" + data + "\n状态：" + status);
});
*/ /*
$.ajax({
type: "GET",
contentType: "UTF-8",
url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=3322",
dataType: 'jsonp',
// dataType: 'text',
success: function (data) {
alert(data);
}
});
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=44333",
data: "{id:12345 }",
dataType: 'jsonp',
success: function (response) {
alert("成功：" + response.d);
},
error: function (msg) {
alert("错误：" + msg);
}
})
*/ // jQuery.support.cors = true; //IE10以下
$.ajax({
type: "post",
url: "http://localhost:65497/WebSite1/WebService.asmx/GetAge?id=44333",
// dataType: 'xml',
dataType: 'text',
data: { id: 'eve7777' },
success:
function (data) {
alert(data);
//xml对象
// document.write(data);
// $("#data").append(data);
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
// console.log(XMLHttpRequest);
alert('error:' + errorThrown);
// $("#data").append(errorThrown);
}
});
});
});
</script>
</head>
<body>
<a id="getdata" href="javascript:void(0);">获取dddd数据</a>
<div id="data"></div>
</body>
</html>
1.首先写一个遮罩层div，然后再写一个弹窗的div
<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">
</div>
<!-- 弹窗 -->
<div id="showdiv" style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff">
<!-- 标题 -->
<div style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >
提示
</div>
<!-- 内容 -->
<div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
js弹窗 js弹出DIV,并使整个页面背景变暗</div>
<!-- 按钮 -->
<div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">
确 定
</div>
</div>
<script type="text/javascript">
// 弹窗
function showWindow() {
$('#showdiv').show();
//显示弹窗
$('#cover').css('display','block');
//显示遮罩层
$('#cover').css('height',document.body.clientHeight+'px');
//设置遮罩层的高度为当前页面高度
}
// 关闭弹窗
function closeWindow() {
$('#showdiv').hide();
//隐藏弹窗
$('#cover').css('display','none');
//显示遮罩层
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>表格头部固定</title>
<style type="text/css">
/*
.table-head table,.table-body table{width:100%;border-collapse:collapse;}
.table-head{padding-right:17px;background-color:#999;color:#000;}
.table-body{width:100%; height:300px;overflow-y:auto;}
.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
.table-body table tr td{
border:1px solid red;
text-align: center;
}
*/ .table-head table,.table-body table{width:1190px;border-collapse:collapse; }
.table-body{width:1200px; height:300px;overflow-y:auto;}
.table-body table tr td{
text-align: center;
}
</style>
</head>
<body>
<div style="width:100%;">
<div class="table-head">
<table>
<colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
<thead>
<tr>
<th>序号</th>
<th>内容</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup><col span="2" style="width: 100px;" /><col /></colgroup>
<tbody>
<tr><td>1</td><td>我只是用来测试的</td></tr>
<tr><td>2</td><td>我只是用来测试的</td></tr>
<tr><td>3</td><td>我只是用来测试的</td></tr>
<tr><td>4</td><td>我只是用来测试的</td></tr>
<tr><td>5</td><td>我只是用来测试的</td></tr>
<tr><td>6</td><td>我只是用来测试的</td></tr>
<tr><td>7</td><td>我只是用来测试的</td></tr>
<tr><td>8</td><td>我只是用来测试的</td></tr>
<tr><td>9</td><td>我只是用来测试的</td></tr>
<tr><td>10</td><td>我只是用来测试的</td></tr>
<tr><td>11</td><td>我只是用来测试的</td></tr>
<tr><td>12</td><td>我只是用来测试的</td></tr>
<tr><td>13</td><td>我只是用来测试的</td></tr>
<tr><td>14</td><td>我只是用来测试的</td></tr>
<tr><td>15</td><td>我只是用来测试的</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
页面加载完成后执行js:
jQuery方法2，该方法一般使用较多
<script type="text/javascript">
$(function () {
alter("123qew");
})
</script>
查询当前正在执行的语句
复制代码
SELECT
der.[session_id],der.[blocking_session_id],
sp.lastwaittype,sp.hostname,sp.program_name,sp.loginame,
der.[start_time] AS '开始时间',
der.[status] AS '状态',
dest.[text] AS 'sql语句',
DB_NAME(der.[database_id]) AS '数据库名',
der.[wait_type] AS '等待资源类型',
der.[wait_time] AS '等待时间',
der.[wait_resource] AS '等待的资源',
der.[logical_reads] AS '逻辑读次数'
FROM sys.[dm_exec_requests] AS der
INNER JOIN master.dbo.sysprocesses AS sp ON der.session_id=sp.spid
CROSS APPLY sys.[dm_exec_sql_text](der.[sql_handle]) AS dest
--WHERE [session_id]>50 AND session_id<>@@SPID
ORDER BY der.[session_id]
GO
复制代码
是否堵塞
SELECT spid,blocked,waittime,waittype,waitresource,p.dbid,cpu,physical_io,memusage,open_tran
,status,login_time,last_batch,hostname,program_name,hostprocess,loginame,cmd,text
FROM master.dbo.sysprocesses p CROSS APPLY sys.dm_exec_sql_text(p.sql_handle) s
WHERE blocked > 0 OR spid IN(SELECT blocked FROM master.dbo.sysprocesses WHERE blocked > 0)
go
检查锁表
select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName
from sys.dm_tran_locks t where resource_type='OBJECT' order by spid asc;
查询导致死锁的sql语句
dbcc inputbuffer(spid);
解锁
declare @spid int
Set @spid = 123--锁表进程
declare @sql varchar(1000)
set @sql='kill '+cast(@spid as varchar)
exec(@sql)
杀掉进程
kill spid
USE[master]
GO
ALTER DATABASE mydbname SET RECOVERY SIMPLE WITH NO_WAIT
GO
ALTER DATABASE mydbname SET RECOVERY SIMPLE --简单模式
GO
USE mydbname
GO
DBCC SHRINKFILE (N'mydbname_Log' , 11, TRUNCATEONLY)
GO
USE[master]
GO
ALTER DATABASE mydbname SET RECOVERY FULL WITH NO_WAIT
GO
ALTER DATABASE mydbname SET RECOVERY FULL --还原为完全模式
GO
保持Session的方法：有人说设session.timeout=-1，或小于0的数。这种方法肯定是不行的，session计算时间以分钟为单位，必须是大于等于1的整数。又有人说设session.timeout=99999。这种同样不行，session有最大时间限制。我经过测试发现最大值为24小时，也就是说你最大可以session.timeout=1440，1441都是不可以有，呵呵。本人测试环境：win2003+IIS6.0+ASP3.0。
所以想通过设session.timeout的过期时间让session永不过期是不可能的。写到Cookies里是比较好的方法，网上也有很多这样的教程，这里就不再说了！还有就是用在要保持session的页里设隐藏iframe每隔一段时间（这个时间小于session.timeout的时间）把刷新一次frame里的空页面！实现方法如下：
在要保持session页里加上： <iframe width=0 height=0 src="/blog/SessionKeeper.asp">
</iframe>
同目录下建一下SessionKeeper.asp的文件。 <html>
<head>
<meta http-equiv="Refresh" content="900000;url=sessionKeeper.asp">
<!--每隔900秒刷新一下自己，为了和服务器通讯一下，保持session不会丢-->
</head>
</html>
这种方法还是比较长见的，另外还有一种和上面类似的方法，不过他不是用meta自动刷新嵌套的iframe的方法。他是用javascript:window.setTimeout("functionname()",10000);第隔一段时间时间自动调用一个函数的方法，当然函数里还是要去连接一个空的文件。具体方法如下：
在要保持session面里加上： <script id=Back language=javascript></script>
<script language=javascript>
function keepsession(){
document.all["Back"].src="/blog/SessionKeeper.asp?RandStr="+Math.random();
//这里的RandStr=Math.random只是为了让每次back.src的值不同，防止同一地址刷新无效的情况
window.setTimeout("keepsession()",900000); //每隔900秒调用一下本身
}
keepsession();
</script>
这样同一目录下建一个空内容的sessionKeeper.asp就文件就可以了！
1.表格很好，有的时候需求和，然后bootstrap-table 默认是关闭 footer的，所以表格不显示footer也就是最后一行
2.我们需要在表格初始化的时候打开footer选项 showFooter:true
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
showFooter:true,
extend: {
index_url: 'cneed/index',
add_url: 'cneed/add',
edit_url: 'cneed/edit',
del_url: 'cneed/del',
multi_url: 'cneed/multi',
table: 'lvdate',
}
});
3.在colums里面 将需要显示footer的列，加上footFormatter
columns: [
[ {title: '客户需求表',colspan: 14}],//这是第一行大标题
[
{checkbox: true,footerFormatter:function(data){
return '总计';//在第一列开头写上总计、统计之类
}
},
其中 footerFormatter：后面的 function 需要返回string 这是官方手册上说的
4.我们可以在需要的列进行计算，我这里纯是实验 所及计算了一下PID
{field: 'PID', title: __('Pid'),sortable: true,footerFormatter: function (data) {
var field = this.field;
var total_sum = data.reduce(function (sum, row) {
return (sum) + (parseFloat(row[field]) || 0);
}, 0);
return total_sum.toFixed(2);
}