EasyUI
http://www.jeasyui.com/ http://www.jeasyui.com/download/index.php
0.Tree
<head>
<link rel="stylesheet" type="text/css" href="UI/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="UI/themes/icon.css" />
<script type="text/javascript" src="UI/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="UI/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
// 异步动态加载树
$("#tt").tree({
checkbox:false,
url: "DocumentTree/ArchivesClassificationTreeHandler.ashx?action=getTree",
onBeforeExpand: function(node, param) {// 获取该节点下其他数据
$('#tt').tree('options').url = "DocumentTree/ArchivesClassificationTreeHandler.ashx?action=getTree_Click&id=" + node.id;
},
onSelect: function(node) {
$("#tt").tree("expand", node.target);
},
onClick: function(node) {
alert(node.id + " " + node.text + " " + node.attributes.sjzbm);
}
});
})
</script>
</head>
<body>
<form id="Form1" runat="server">
<div style=" width:220px;">
<ul id="tt" animate="true"></ul>
</div>
</form>
</body>
ArchivesClassificationTreeHandler.ashx
string action = string.Empty;
JavaScriptSerializer serializer = new JavaScriptSerializer();
ArchivesClassificationTreeBLL actbll = new ArchivesClassificationTreeBLL();
public void ProcessRequest(HttpContext context)
{
HttpRequest request = context.Request;
HttpResponse response = context.Response;
response.ContentType = "text/html";
action = request.Params["action"];
codeHandle(context, request, response);
}
/// <summary>
/// 统一跳转
/// </summary>
/// <param name="request"></param>
/// <param name="response"></param>
private void codeHandle(HttpContext context, HttpRequest request, HttpResponse response)
{
switch (action)
{
case "getTree":
GetArchiveTree(request, response);
break;
case "getTree_Click":
GetArchiveTree_Click(request, response);
break;
default:
break;
}
}
/// <summary>
/// 初始化的时候
/// </summary>
/// <param name="request"></param>
/// <param name="response"></param>
public void GetArchiveTree(HttpRequest request, HttpResponse response)
{
List<TreeModel> tms = new List<TreeModel>();
tms = actbll.ReturnArchivesClassificationTreeRootNode(false);
string result = serializer.Serialize(tms).Replace("CHECKED", "checked");
response.Write(result);
}
/// 根据条件获取检索树
/// </summary>
/// <param name="request"></param>
/// <param name="response"></param>
public void GetArchiveTree_Click(HttpRequest request, HttpResponse response)
{
List<TreeModel> tms = new List<TreeModel>();
tms = actbll.ReturnArchivesClassificationTreeChildNode(request.QueryString["id"], false);
string result = serializer.Serialize(tms).Replace("CHECKED", "checked");
response.Write(result);
}
[Serializable]
public class TreeModel //TreeModel与easyui的tree树节点node对应(如node.id)这些属性一般由数据库实体类(这里是ArchivesClassificationTreeEntity)为其赋值,将被JavaScriptSerializer转成json对象
{
private string _id = string.Empty;
private bool _checked = false;
private string _state = "open";
private string _iconCls = "";
private TreeAttributes _attributes = new TreeAttributes();
private string _target = string.Empty;
private string _text = string.Empty;
private List<TreeModel> _children = new List<TreeModel>();
private List<TreeModel> _parents = new List<TreeModel>();
public string id
{
set { _id = value; }
get { return _id; }
}
public bool CHECKED
{
set { _checked = value; }
get { return _checked; }
}
public string iconCls
{
set { _iconCls = value; }
get { return _iconCls; }
}
public string state
{
set { _state = value; }
get { return _state; }
}
public TreeAttributes attributes
{
set { _attributes = value; }
get { return _attributes; }
}
public string target
{
set { _target = value; }
get { return _target; }
}
public string text
{
set { _text = value; }
get { return _text; }
}
public List<TreeModel> children
{
set { _children = value; }
get { return _children; }
}
public List<TreeModel> parents
{
set { _parents = value; }
get { return _parents; }
}
}
//TreeModel的attributes属性，可能在easyui的node.attributes用到的属性
(如ode.attributes.attrval)这些属性一般由数据库实体类(这里是ArchivesClassificationTreeEntity)为其赋值
public class TreeAttributes
{
private string _attrval = string.Empty;//需要的参数，可以自己添加
private bool _existChildren = false;//是否存在子节点
private bool _addtab = false;//是否在右边添加tabs，暂时作废
private bool _isdel = true;
private bool _isupdata = true;
private bool _isRole = true;
private bool _isDept = true;//组织机构树节点是否是部门节点
private string _nodeType = string.Empty;//模板树节点类型
private string _nodeCrtName = string.Empty;//模板树节点创建人
private string _cnt = "";
private string _foldername = "";
private string _tabName = string.Empty;
private string _fjdid = string.Empty;
private string _haschild = string.Empty;
private string _nodeLevel = string.Empty;
private string _sjzbm = string.Empty;
private string _sjcbm = string.Empty;
private string _jdzdm = string.Empty;
private string _jddm = string.Empty;
public string haschild
{
set { _haschild = value; }
get { return _haschild; }
}
public string fjdid
{
set { _fjdid = value; }
get { return _fjdid; }
}
public string tabName
{
get
{
return _tabName;
}
set
{
_tabName = value;
}
}
private string _url = "about:blank";
public string url
{
get { return _url; }
set { _url = value; }
}
public string cnt
{
get { return _cnt; }
set { _cnt = value; }
}
public string foldername
{
get { return _foldername; }
set { _foldername = value; }
}
public bool isRole
{
get { return _isRole; }
set { _isRole = value; }
}
public string attrval
{
set { _attrval = value; }
get { return _attrval; }
}
public bool existChildren
{
set { _existChildren = value; }
get { return _existChildren; }
}
public bool addtab
{
set { _addtab = value; }
get { return _addtab; }
}
public bool isdel
{
set { _isdel = value; }
get { return _isdel; }
}
public bool isupdata
{
set { _isupdata = value; }
get { return _isupdata; }
}
public bool isdept
{
set { _isDept = value; }
get { return _isDept; }
}
public string nodeType
{
set { _nodeType = value; }
get { return _nodeType; }
}
public string nodeCrtName
{
set { _nodeCrtName = value; }
get { return _nodeCrtName; }
}
public string nodeLevel
{
set { _nodeLevel = value; }
get { return _nodeLevel; }
}
public string sjzbm
{
set { _sjzbm = value; }
get { return _sjzbm; }
}
public string sjcbm
{
set { _sjcbm = value; }
get { return _sjcbm; }
}
public string jdzdm
{
set { _jdzdm = value; }
get { return _jdzdm; }
}
public string jddm
{
set { _jddm = value; }
get { return _jddm; }
}
}
[Serializable] //数据库实体类
public class ArchivesClassificationTreeEntity
{
private string _JDID = string.Empty;
/// <summary>
/// 节点ID
/// </summary>
public string JDID
{
get { return _JDID; }
set { _JDID = value; }
}
private string _JDMC = string.Empty;
/// <summary>
/// 节点名称
/// </summary>
public string JDMC
{
get { return _JDMC; }
set { _JDMC = value; }
}
private string _JDDM = string.Empty;
/// <summary>
/// 节点代码
/// </summary>
public string JDDM
{
get { return _JDDM; }
set { _JDDM = value; }
}
private string _FJDID = string.Empty;
/// <summary>
/// 父节点ID
/// </summary>
public string FJDID
{
get { return _FJDID; }
set { _FJDID = value; }
}
private string _JDCC = string.Empty;
/// <summary>
/// 节点层次
/// </summary>
public string JDCC
{
get { return _JDCC; }
set { _JDCC = value; }
}
private int _JDPX;
/// <summary>
/// 节点排序
/// </summary>
public int JDPX
{
get { return _JDPX; }
set { _JDPX = value; }
}
private string _JDAJBM = string.Empty;
/// <summary>
/// 节点案卷表名
/// </summary>
public string JDAJBM
{
get { return _JDAJBM; }
set { _JDAJBM = value; }
}
private string _JDWJBM = string.Empty;
/// <summary>
/// 节点文件表名
/// </summary>
public string JDWJBM
{
get { return _JDWJBM; }
set { _JDWJBM = value; }
}
private string _JDLB = string.Empty;
/// <summary>
/// 节点类别（案卷2 文件1）
/// </summary>
public string JDLB
{
get { return _JDLB; }
set { _JDLB = value; }
}
private string _JDZDM = string.Empty;
/// <summary>
/// 对应条件字段名
/// </summary>
public string JDZDM
{
get { return _JDZDM; }
set { _JDZDM = value; }
}
private string _HTTPDZ = string.Empty;
/// <summary>
/// http通信用地址
/// </summary>
public string HTTPDZ
{
get { return _HTTPDZ; }
set { _HTTPDZ = value; }
}
private string _SOCKET = string.Empty;
/// <summary>
/// SOCKET通信用地址
/// </summary>
public string SOCKET
{
get { return _SOCKET; }
set { _SOCKET = value; }
}
private string _JDLJ = string.Empty;
/// <summary>
/// 原文绝对路径
/// </summary>
public string JDLJ
{
get { return _JDLJ; }
set { _JDLJ = value; }
}
private string _SFXS = string.Empty;
/// <summary>
/// 是否显示（0非 1是）
/// </summary>
public string SFXS
{
get { return _SFXS; }
set { _SFXS = value; }
}
private string _CJR = string.Empty;
/// <summary>
/// 创建人
/// </summary>
public string CJR
{
get { return _CJR; }
set { _CJR = value; }
}
private string _BZH = string.Empty;
/// <summary>
/// 备注
/// </summary>
public string BZH
{
get { return _BZH; }
set { _BZH = value; }
}
}
ashx里面的ReturnArchivesClassificationTreeRootNode(创建根节点)方法，及创建根节点下的第一层档案树节点方法
ArchivesClassificationTreeDAL actdal = new ArchivesClassificationTreeDAL();
/// <summary>
/// 创建根节点
/// </summary>
/// <param name="isPermission">是否根据权限读取数据</param>
/// <returns>TreeModel实体List</returns>
public List<TreeModel> ReturnArchivesClassificationTreeRootNode(bool isPermission)
{
List<TreeModel> tms = new List<TreeModel>();
List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();
lacte = actdal.GetArchivesClassificationTreeNode("0");
foreach (ArchivesClassificationTreeEntity acte in lacte)
{
TreeModel tm = new TreeModel();
tm.id = acte.JDID;
tm.text = acte.JDMC;
if (!string.IsNullOrEmpty(acte.JDAJBM))
{
tm.attributes.sjzbm = acte.JDAJBM;
tm.attributes.sjcbm = acte.JDWJBM;
}
else
{
tm.attributes.sjzbm = acte.JDWJBM;
}
tm.state = "open";
tm.iconCls = "icon-tree-folder";
ReturnArchivesClassificationTreeFirstLevelNode(tm, tm.id, isPermission);
tms.Add(tm);
}
return tms;
}
/// <summary>
/// 创建根节点下的第一层档案树节点
/// </summary>
/// <param name="tm_parent">父节点实体</param>
/// <param name="parentNodeValue">父节点Id</param>
/// <param name="isPermission">是否根据权限读取数据</param>
public void ReturnArchivesClassificationTreeFirstLevelNode(TreeModel tm_parent, string parentNodeValue, bool isPermission)
{
List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();
if (!isPermission)
{
lacte = actdal.GetArchivesClassificationTreeNode(parentNodeValue);
}
else
{
//根据登录用户权限读取树节点
}
foreach (ArchivesClassificationTreeEntity acte in lacte)
{
TreeModel tm_child = new TreeModel();
tm_child.id = acte.JDID;
tm_child.text = acte.JDMC;
if (!string.IsNullOrEmpty(acte.JDAJBM))
{
tm_child.attributes.sjzbm = acte.JDAJBM;
tm_child.attributes.sjcbm = acte.JDWJBM;
}
else
{
tm_child.attributes.sjzbm = acte.JDWJBM;
}
tm_child.state = "open";
tm_child.iconCls = "icon-tree-folder";
if (IsHasChildren(tm_child.id))
{
tm_child.state = "closed";
}
else
{
tm_child.state = "open";
}
tm_parent.children.Add(tm_child);
}
}
ashx里的ReturnArchivesClassificationTreeChildNode(返回当前选择节点下的所有子节点)方法
/// <summary>
/// 返回当前选择节点下的所有子节点
/// </summary>
/// <param name="parentNodeValue">父节点Id</param>
/// <param name="isPermission">是否根据权限读取数据</param>
/// <returns>TreeModel实体List</returns>
public List<TreeModel> ReturnArchivesClassificationTreeChildNode(string parentNodeValue, bool isPermission)
{
List<TreeModel> tms = new List<TreeModel>();
List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();
if (!isPermission)
{
lacte = actdal.GetArchivesClassificationTreeNode(parentNodeValue);
}
else
{
//根据登录用户权限读取树节点
}
foreach (ArchivesClassificationTreeEntity acte in lacte)
{
TreeModel tm = new TreeModel();
tm.id = acte.JDID;
tm.text = acte.JDMC;
if (!string.IsNullOrEmpty(acte.JDAJBM))
{
tm.attributes.sjzbm = acte.JDAJBM;
tm.attributes.sjcbm = acte.JDWJBM;
}
else
{
tm.attributes.sjzbm = acte.JDWJBM;
}
tm.state = "open";
tm.iconCls = "icon-tree-folder";
if (IsHasChildren(tm.id))
{
tm.state = "closed";
}
else
{
tm.state = "open";
}
tms.Add(tm);
}
return tms;
}
DAL里的GetArchivesClassificationTreeNode方法
/// <summary>
/// 读取节点下所有子节点
/// 如果读取根节点，则参数为0
/// </summary>
/// <param name="nodeId">父节点ID</param>
/// <returns>ArchivesClassificationTreeEntity List</returns>
public List<ArchivesClassificationTreeEntity> GetArchivesClassificationTreeNode(string parentNodeId)
{
List<ArchivesClassificationTreeEntity> lacte = new List<ArchivesClassificationTreeEntity>();
string sqlStr = "select * from yg_bz_das where fjdid = ? and sfxs = '1' and scbz = '0' order by jdpx";
OleDbParameter[] param = new OleDbParameter[]{
new OleDbParameter("",OleDbType.VarChar)
};
param[0].Value = parentNodeId;
OleDbDataReader odr = OledbHelper.ExecuteReader(CommandType.Text, sqlStr, param);
while (odr.Read())
{
ArchivesClassificationTreeEntity acte = new ArchivesClassificationTreeEntity();
acte.JDID = odr["JDID"].ToString();
acte.JDMC = odr["JDMC"].ToString();
acte.FJDID = odr["FJDID"].ToString();
acte.JDCC = odr["JDCC"].ToString();
acte.JDAJBM = odr["JDAJBM"].ToString();
acte.JDWJBM = odr["JDWJBM"].ToString();
acte.JDLB = odr["JDLB"].ToString();
acte.HTTPDZ = odr["HTTPDZ"].ToString();
acte.SOCKET = odr["SOCKET"].ToString();
acte.JDLJ = odr["JDLJ"].ToString();
acte.CJR = odr["CJR"].ToString();
acte.JDDM = odr["JDDM"].ToString();
acte.JDZDM = odr["JDZDM"].ToString();
acte.BZH = odr["BZH"].ToString();
lacte.Add(acte);
}
odr.Dispose();
return lacte;
}
1.Accordion
<head>
<title>Accordion - jQuery EasyUI Demo</title>
<link href="jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.2.4/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="jquery-easyui-1.2.4/jquery-1.6.min.js" type="text/javascript"></script>
<script src="jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function select(){
$("#aa").accordion('select','selected属性表示初始选择版面')
} //选择某个版面,第二个参数是某个版面的title属性值
var num=1;
function add(){
$("#aa").accordion('add',{title:'title'+num,content:'<input type="button" value="确定"/>'});
num++; //添加一个版面，版面的title及其内容
}
function remove(){
var pp=$("#aa").accordion('getSelected'); //获得当前选的版面
if(pp){
var theTitle=pp.panel("options").title; //当前选的版面的title
$("#aa").accordion('remove',theTitle); //删除某个版面
}
}
</script>
</head>
<div style="margin: 10px 0;"> <a href="#" class="easyui-linkbutton" onclick="select()">Select</a> <a href="#" class="easyui-linkbutton" onclick="add()">Add</a> <a href="#" class="easyui-linkbutton" onclick="remove()">Remove</a> </div> <div id="aa" class="easyui-accordion" style="width:700px; height:500px;"> <div title="title属性必须有,title属性值就是每个版面的标题" iconCls="icon-ok" style="overflow:auto;padding:10px;">AAA</div> <div title="iconCls属性就是每个版面标题前面的图标类型" iconCls="icon-reload" style="padding:10px;">BBB</div> <div title="上面的easyui-accordion类必须有,是整个accordion的样式" selected="true" style="padding:10px;">CCC</div> <div title="selected属性表示初始选择版面" style="padding:10px;">DDD</div> <div title="上面aa里定义的width:700px; height:500px就是每个版面的宽和高" style="padding:10px;">EEE</div> </div>
2.Calendar
<div class="easyui-calendar" style="width:180px;height:180px;"></div>
3.Combo
<script type="text/javascript">
$(document).ready(function(){
//下拉框是否不能为空，是否可编辑
$("#cc").combo({required:true,editable:false});
//将div里的内容添加到下拉框中
$("#sp").appendTo($("#cc").combo("panel"));
//选择选项后取得所选项的键值，及隐藏下拉框
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
})
</script>
<select id="cc"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div> <input type="radio" name="lang" value="01"/><span>Java</span><br/> <input type="radio" name="lang" value="02"/><span>C#</span><br/> <input type="radio" name="lang" value="03"/><span>Ruby</span><br/> <input type="radio" name="lang" value="04"/><span>Basic</span><br/> <input type="radio" name="lang" value="05"/><span>Fortran</span> </div>
4.Layout
<body class="easyui-layout"> <!--整个页面都是layout-->
<div region="north" split="true" title="North" border="false" style="height:120px;padding:10px;">north region</div>
<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
<div region="center" title="Main" style="padding:10px;">center region</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" title="South" border="false" style="height:120px;padding:10px;">south region</div>
<!--以上region表示每个div的位置，split表示该div是否可以伸缩，title表示每个div的标题 有title才有隐藏内容的功能-->
</body>
<!--只在某个范围内是layout，必须设置该div的width和height-->
<div class="easyui-layout" style="width:700px;height:400px;">
<div region="north" split="true" title="North" border="true" style="height:120px;padding:10px;">north region</div>
<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
<div region="center" title="Main" style="padding:10px;">center region</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div icon="icon-reload" region="south" title="South" border="true" style="height:120px;padding:10px;">south region</div>
<!--icon="icon-reload"表示title标题前面的图标-->
</div>
<div class="easyui-layout" style="width:700px;height:400px;">
<div region="north" split="true" title="North" border="true" style="height:120px;padding:10px;">north region</div>
<div region="west" split="true" title="West" style="width:100px;padding:10px;">west content</div>
<div region="center" title="Main" style="padding:10px;">
<!--位于某个div里的layout 设置fit属性可以自动调整大小，除了center外其他什么west east south等最好设置width和height center会根据它们的高宽自动设置合适的大小-->
<div class="easyui-layout" fit="true">
<div region="center">位于某个div里的layout</div>
<div region="east" split="true" style="width:100px;">没有title，可以伸缩，像可以拉拖的表格一样</div>
</div>
</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" icon="icon-reload" title="South" border="true" style="height:120px;padding:10px;">south region</div>
</div>
5.Tabs
<script type="text/javascript">
$(function(){
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler: function(){
alert('add');
}
},{
iconCls:'icon-save',
handler: function(){
alert('save');
}
}]
});
});
//以上给tabs右上角添加工具按钮(这里是添加和保存 及它们的handler处理函数)
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
iconCls:'icon-save',
closable:true
});
}
//以上是添加tab的按钮的函数
function getSelected(){
var tab = $('#tt').tabs('getSelected');
alert('Selected: '+tab.panel('options').title);
}
//以上是取得所选tab的按钮的函数
function update(){
index++;
var tab = $('#tt').tabs('getSelected');
$('#tt').tabs('update', {
tab: tab,
options:{
title:'new title'+index,
iconCls:'icon-save'
}
});
}
//以上是更新当前所选tab的按钮的函数(这里是更新tab的title和title前图标)
</script>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a> <a class="easyui-linkbutton" href="javascript:void(0)" onclick="getSelected()">getSelected</a> <a class="easyui-linkbutton" href="javascript:void(0)" onclick="update()">Update</a><br/><br/> <!--整个tabs的class必须为easyui-tabs，必须设置width和height，plain表示tabs的标题部分有没有背景色--> <div id="tt" class="easyui-tabs" plain="true" style="width:700px;height:250px;"> <div title="Tab1" style="padding:20px;"> </div> <!--closable表示该tab能否关闭，cache表示该tab启不启动缓存--> <div title="Tab2" closable="true" style="padding:20px;" cache="false" href="tabsUI.aspx"> This is Tab2 with close button. </div> <div title="Tab3 with iframe" closable="true"> <iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe> </div> <!--包含tabs的tab--> <div title="Tab5 with sub tabs" closable="true" iconCls="icon-cut" style="padding:10px;"> <div class="easyui-tabs" fit="true" plain="false" style="height:100px;width:300px;"> <div title="Title1" icon="icon-add" style="padding:10px;">Content 1</div> <div title="Title2" style="padding:10px;">Content 2</div> <div title="Title3" style="padding:10px;">Content 3</div> </div> </div> </div>
6.Messager
<script type="text/javascript">
$(document).ready(function(){
$.messager.show({
title:'My Title',
msg:'将在5秒钟后关闭'+'<br/><a href="http://www.baidu.com">去百度</a>'+
'<br/><table rules="all"><tr><td>AAA</td><td>BBB</td></tr><tr><td>CCC</td><td>DDD</td></tr></table>'+
'<br/><br/><br/><br/><br/>',
timeout:5000,
showType:'slide',
});
})
</script>
//以上是右下角的message，timeout默认是4000 为0时将不会自动关闭，showType的可选项有slide,fade,show，messge的大小随msg的大小自动调整
<script type="text/javascript">
$(document).ready(function(){
$.messager.alert('My Title','Here is a message!');
$.messager.alert('My Title','Here is a error message!','error');
$.messager.alert('My Title','Here is a info message!','info');
$.messager.alert('My Title','Here is a question message!','question');
$.messager.alert('My Title','Here is a warning message!','warning');
//以上是各种模态提示
$.messager.confirm('My Title', 'Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
//模态的确定提示
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
//模态的prompt
})
</script>