1、Uploadify简介
&&&&&&& Uploadify是基于jQuery的一种上传插件，支持多文件、带进度条显示上传，在项目开发中常被使用。
&&&&&&& Uploadify官方网址：
2、ASP.NET MVC3中的使用Uploadify
&&&&&& 搭建ASP.NET MVC3解决方案如下图，其中使用到的Uploadify为3.1版本：
　　1&、简单示例
&&&&& _Layout.cshtml代码：
&!DOCTYPE html&
&title&@ViewBag.Title&/title&
@RenderSection("Header")
@RenderBody()
&&&&& Index.cshtml代码：
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
@section Header{
&link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /&
&script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"&&/script&
&script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
: '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader'
: '/Home/Upload'
&style type="text/css"&
font-size: 12px;
height: 20px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
&div class="tip"&
jQuey Uploadify上传文件示例：
&input type="file" id="file_upload" name="file_upload" /&
&&&&&&& HomeController.cs代码:
using System.Collections.G
using System.L
using System.W
using System.Web.M
using System.IO;
namespace WebUI.Controllers
public class HomeController : Controller
// GET: /Home/
public ActionResult Index()
return View();
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Upload(HttpPostedFileBase fileData)
if (fileData != null)
// 文件上传后的保存路径
string filePath = Server.MapPath("~/Uploads/");
if (!Directory.Exists(filePath))
Directory.CreateDirectory(filePath);
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名
string saveName = Guid.NewGuid().ToString() + fileE // 保存文件名称
fileData.SaveAs(filePath + saveName);
return Json(new { Success = true, FileName = fileName, SaveName = saveName });
catch (Exception ex)
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);
&&&&&&& 上传效果图：
&&&&&&& 2&、设置上传图片大小
&&&&&&& ASP.NET MVC默认情况下，允许上传的文件大小最大为4MB。因此在默认情况下，Uploadify也只能最大上传4MB大小的文件，超过范围则会IO报错提示无法上传。
&&&&&&& 修改Web.config设置允许上传的最大文件大小：
&system.web&
　　&!--设置最大允许上传文件大小1G--&
　　&httpRuntime maxRequestLength= "102400" executionTimeout= "60" /&
&/system.web&
　　修改最大上传文件大小后效果：
&&&&&&& 3&、Uploadify常用属性设置
&&&&&&& auto：是否选择文件后自动上传，默认为true。
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
@section Header{
&link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /&
&script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"&&/script&
&script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
: '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader'
: '/Home/Upload'
&style type="text/css"&
font-size: 12px;
height: 20px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
&div class="tip"&
jQuey Uploadify上传文件示例：
&input type="file" id="file_upload" name="file_upload" /&
&a href="javascript:$('#file_upload').uploadify('upload');"&上传&/a&
&&&&&&& buttonText：设置上传按钮显示文字。
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonText'
: '请选择上传文件',
: '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader'
: '/Home/Upload'
&&&&&&& buttonImage：设置上传按钮背景图片。
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
@section Header{
&link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /&
&script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"&&/script&
&script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader': '/Home/Upload'
&style type="text/css"&
font-size: 12px;
height: 20px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
.uploadify-button
background-color: transparent;
border: none;
padding: 0;
.uploadify:hover .uploadify-button
background-color: transparent;
&div class="tip"&
jQuey Uploadify上传文件示例：
&input type="file" id="file_upload" name="file_upload" /&
&&&&&&& multi：是否允许一次选择多个文件一起上传，默认为true。
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
multi: true,
'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader': '/Home/Upload'
&&&&&&&& fileTypeDesc：设置允许上传图片格式描述；
&&&&&&&& fileTypeExts：设置允许上传图片格式。
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
'fileTypeDesc': '图片文件',
'fileTypeExts': '*. *. *.png',
'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader': '/Home/Upload'
&&&&&&& removeCompleted：设置已完成上传的文件是否从队列中移除，默认为true。
$(function() {
$("#file_upload").uploadify({
'removeCompleted' : false,
: '/uploadify/uploadify.swf',
'uploader'
: '/uploadify/uploadify.php'
&&&&&&& queueSizeLimit：设置上传队列中同时允许的上传文件数量，默认为999。
$(function() {
$("#file_upload").uploadify({
'queueSizeLimit' : 1,
: '/uploadify/uploadify.swf',
'uploader'
: '/uploadify/uploadify.php'
&&&&&& uploadLimit：设置允许上传的文件数量，默认为999。
$(function() {
$("#file_upload").uploadify({
: '/uploadify/uploadify.swf',
'uploader'
: '/uploadify/uploadify.php',
'uploadLimit' : 1
&&&&&&& 4&、Uploadify常用事件设置
&&&&&&& onUploadComplete:单个文件上传完成时触发事件。
$(function() {
$("#file_upload").uploadify({
: '/uploadify/uploadify.swf',
'uploader'
: '/uploadify/uploadify.php',
'onUploadComplete' : function(file) {
alert('The file ' + file.name + ' finished processing.');
&&&&&&& onQueueComplete：队列中全部文件上传完成时触发事件。
$(function() {
$("#file_upload").uploadify({
: '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
&&&&&&& onUploadSuccess：单个文件上传成功后触发事件。
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonImage': '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
'swf': '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader': '/Home/Upload',
'onUploadSuccess': function (file, data, response) {
eval("data=" + data);
alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);
&&&&&&& 4&、Uploadify常用方法
&&&&&&&& upload：上传文件
&&&&&&&& cancel：取消上传
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
@section Header{
&link href="@Url.Content("~/Scripts/uploadify-v3.1/uploadify.css")" rel="stylesheet" type="text/css" /&
&script src="@Url.Content("~/Scripts/jquery-1.8.1.min.js")" type="text/javascript"&&/script&
&script src="@Url.Content("~/Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js")" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
$('#file_upload').uploadify({
'buttonImage'
: '@Url.Content("~/Scripts/uploadify-v3.1/browse-btn.png")',
: '@Url.Content("~/Scripts/uploadify-v3.1/uploadify.swf")',
'uploader'
: '/Home/Upload'
&style type="text/css"&
font-size: 12px;
height: 20px;
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
.uploadify-button
background-color: transparent;
border: none;
padding: 0;
.uploadify:hover .uploadify-button
background-color: transparent;
&div class="tip"&
jQuey Uploadify上传文件示例：
&input type="file" id="file_upload" name="file_upload" /&
&a href="javascript:$('#file_upload').uploadify('upload');"&上传第一个&/a&
&a href="javascript:$('#file_upload').uploadify('upload','*');"&上传队列&/a&
&a href="javascript:$('#file_upload').uploadify('cancel');"&取消第一个&/a&
&a href="javascript:$('#file_upload').uploadify('cancel', '*');"&取消队列&/a&
3、示例代码附件
阅读(...) 评论()jQuery+jQuery zTree+json实现树形结构时页面接收数据
[问题点数：40分，结帖人yunzhongfeiniao]
jQuery+jQuery zTree+json实现树形结构时页面接收数据
[问题点数：40分，结帖人yunzhongfeiniao]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。Ext.onReady(function() {
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.QuickTips.init();
myTreeLoader = new Ext.tree.TreeLoader( {
applyLoader:false,
paramsAsHash: true,
baseParams : {
id : 'oid',
foo: 'empty'
directFn: treeProvider3.getTreeGrid
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 600,
height: 500,
id: 'usedByPartsTreeGridID',
//rootVisible:false,
//不显示根节点
renderTo: Ext.getBody(),
//enableDD: true,//是否可以移动
//autoScroll: true,//是否有滚动条
loader: myTreeLoader,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 200
header: 'Duration',
width: 200,
dataIndex: 'duration'
header: 'Assigned To',
width: 200,
dataIndex: 'user'
myTreeLoader.on(&beforeload&, function(treeLoader, node) {
alert(node.attributes.Task);
Ext.getCmp('usedByPartsTreeGridID').getLoader().baseParams.id = node.attributes.T//node.attributes.task为节点属性task的值
Ext.getCmp('usedByPartsTreeGridID').getLoader().baseParams.foo =
Ext.getCmp('usedByPartsTreeGridID').getRootNode().reload();
@ExtDirectMethod(value = ExtDirectMethodType.TREE_LOAD, group = &tree&)
public List&TreeVO& getTreeGrid(
@RequestParam(value = &id&) String id,
@RequestParam(value = &foo&, defaultValue = &defaultValue&) String foo) {
List&TreeVO& secondresult = new ArrayList&TreeVO&();
List&TreeVO& childresult = new ArrayList&TreeVO&();
List&TreeVO& result = new ArrayList&TreeVO&();
for (int i = 1; i &= 5; ++i) {
TreeVO children = new TreeVO();
children.setTask(i + &second level children&);
children.setDuration(i + & level children&);
children.setLeaf(&true&);//是否叶子节点，true为是,如果不是叶子节点，则不能设置值
children.setIconCls(&task&);
children.setUser(i + &second user&);
secondresult.add(children);
for (int i = 1; i &= 5; ++i) {
TreeVO children = new TreeVO();
children.setTask(i + &first level children&);
children.setDuration(i + & level children&);
children.setIconCls(&task-folder&);
children.setUser(i + &first user&);
children.setChildren(secondresult);//secondresult List&TreeVO&类型
childresult.add(children);
TreeVO rootNode = new TreeVO();
rootNode.setTask(&Project: Shopping&);
rootNode.setDuration(&Project 0 level children&);
rootNode.setExpanded(&true&);
rootNode.setIconCls(&task-folder&);
rootNode.setUser(&Tommy Maintz&);
rootNode.setChildren(childresult);
result.add(rootNode);
&re: jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六）
var gridJson
= new Ext.form.Hidden({
name:'gridJson',
//然后把gridJson放到FormPanel的items
new Ext.Panel( {
renderTo: Ext.getBody(),
height: 500,
width: 500,
border: false,
frame: false,
layout: 'vbox',
items: [basicInfo,grid ],
'-&', // Fill
handler: function() {
var createFormPanel = Ext.getCmp('createFormPanel').getForm();
var name=createFormPanel.findField('name').getValue();//获取值
var jsonvalue = getJsonValues('myEditorGrid');
createFormPanel.findField('gridJson').setValue(jsonvalue);//设置值
basicInfo.getForm().submit( {
foo: 'bar',
Ext.getCmp('pagingToolbar').changePage(1);
//把grid转换为json字符串
function getJsonValues(editorgrid){
var count = Ext.getCmp(editorgrid).getStore().getCount(); // 获取store的记录行数
var records = Ext.getCmp(editorgrid).getStore().getRange(0, count); // 获得遍历条件
var temp=new Array();
//Ext.getCmp(editorgrid).getStore().each(function(record) {
for ( var i = 0; i & records. i++) {
var record = records[i];
temp.push(record.data);
= Ext.encode(temp);
&re: jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六）
我也觉得挺好的呀&&&&
&re: jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六）
partURL = action.result.partURL;
exception = action.result.
//alert(partURL);
if(!Ext.isEmpty(partURL)){
location.href = partURL;
//window.open(partURL);
&re: jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六）
function commpartview_doc_removeLink(partOid, docOid) {
Ext.MessageBox.confirm('提示','是否继续?', callBack);
function callBack(id) {
if (&yes& == id) {
partRelatedDocController.removeLink(partOid, docOid, function(result, e) {
if (&Success& == result) {
location.href = location.
alert(&修改失败，请重试!&);
function commpartview_doc_updateConfig(docOid, ibaName) {
Ext.MessageBox.prompt(resources.createPart_jwzprompttitle,
resources.createPart_jwzpromptcontent, callBack, this, true, '');
function callBack(id, userInputConfigValue) {
partRelatedDocController.updateConfig(docOid, ibaName,
userInputConfigValue, function(result, e) {
if (&Success& == result) {
location.href = location.
alert(&修改失败，请重试!&);
&re: jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六）
* Ext JS Library 3.4.0
* Copyright(c)
Sencha Inc.
* licensing&#
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Direct.addProvider(Ext.app.REMOTING_API);
var storeFields = [{
name: 'id'
name: 'fullName'
name: 'state'
var writer = new Ext.data.JsonWriter( {
writeAllFields: true,
encode: false
var firstGridStore = new Ext.data.DirectStore( {
id: 'directStore',
autoDestroy: true,
paramsAsHash: true,
root: 'records',
totalProperty: 'total',
autoLoad: false,
autoSave: true,
successProperty: 'success',
fields: storeFields,
remoteSort: true,
idProperty: 'id',
writer: writer,
baseParams: {
name: 'Ralph'
read: createUsageLinkController.loadWithPaging2
//create: personAction.create,
//update: personAction.update,
// destroy: personAction.destroy
var columnModel = [ {
header: 'Last Name',
dataIndex: 'id',
sortable: true//,
//editor: textFieldEditor
header: 'First Name',
dataIndex: 'fullName',
sortable: true //,
// editor: textFieldEditor
header: 'State',
dataIndex: 'state',
sortable: true//,
// editor: comboEditor
var pagingToolbar = {
xtype: 'paging',
store: firstGridStore,
pageSize: 50,
displayInfo: true,
id: 'pagingToolbar'
var firstGrid =new Ext.grid.GridPanel( {
id : 'firstGrid',
: 'secondGridDDGroup',
: firstGridStore,
enableDragDrop
columns: columnModel,
loadMask: true,
: 'First Grid',
bbar: pagingToolbar
var secondGridStore = new Ext.data.JsonStore({
fields : storeFields,
: 'records'
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
id : 'secondGrid',
: 'firstGridDDGroup',
: secondGridStore,
: columnModel,
enableDragDrop
//stripeRows
: 'Second Grid'
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
renderTo: Ext.getBody(),
: { flex : 1 }, //auto stretch
layoutConfig : { align : 'stretch' },
firstGrid,secondGrid
});
Ext.getCmp('pagingToolbar').changePage(1);
// // used to add records to the destination stores
var blankRecord =
Ext.data.Record.create(storeFields);
* Setup Drop Targets
// This will make sure we only drop to the
view scroller element
var firstGridDropTargetEl =
firstGrid.getView().scroller.
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
: 'firstGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records =
ddSource.dragData.
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);//删除secondGrid移动的数据
return true
// This will make sure we only drop to the view scroller element
var secondGridDropTargetEl = secondGrid.getView().scroller.
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
: 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records =
ddSource.dragData.
//Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); //删除firstGrid移动的数据,firstGrid的数据会刷新
secondGrid.store.add(records);
secondGrid.store.sort('id', 'ASC');
return true最近花了不少时间在重构和进一步提炼我的Web开发框架上，力求在用户体验和界面设计方面，和Winform开发框架保持一致，而在Web上，我主要采用EasyUI的前端界面处理技术，走MVC的技术路线，在重构完善过程中，很多细节花费不少时间进行研究和提炼，一步步走过来，也积累了不少经验，本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享，本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验。在很多界面设计上，我们可能都需要引入树列表控件，这个控件可以用zTree来实现，也可以用EasyUI的内置树控件进行展示，由于历史原因，我原来倾向于使用zTree，最新把它全部修改为EasyUI的树控件，并进行了完善优化，发现代码更加简洁明快，非常不错。1、在界面上使用EasyUI的树控件一般情况下，使用EasyUI的树控件，代码很简单，脚本代码如下所示，主要就是通过调用url来获得Json数据，然后就可以显示了，通过onClick就可以响应用户单击节点的操作，每个节点有id, text, iconCls, checked,state,children等属性。1）树控件的Json数据绑定
$('#treeDept').tree({
url: '/User/GetMyDeptTreeJson?userId=@Session["UserId"]',
onClick: function (node) {
loadData(node.id);
});2）树控件的折叠和展开树控件的展开和折叠，可以通过定义两个通用的脚本进行处理，如下所示。
function expandAll(treeName) {
var node = $('#' + treeName).tree('getSelected');
if (node) {
$('#' + treeName).tree('expandAll', node.target);
$('#' + treeName).tree('expandAll');
function collapseAll(treeName) {
var node = $('#' + treeName).tree('getSelected');
if (node) {
$('#' + treeName).tree('collapseAll', node.target);
$('#' + treeName).tree('collapseAll');
}然后，在页面加载完毕后，绑定指定的按钮控件就可以了吗，如下代码所示。
//初始化对象
$(document).ready(function () {
//初始化机构分类
initOUCategorys();
//机构基础信息
initDeptTreeview();
$("#deptExpand").bind("click", function () {
expandAll("treeDept");
$("#deptCollapse").bind("click", function () {
collapseAll("treeDept");
$("#loading").center(); //loading的图片显示居中
});3）树控件的复选框显示树控件默认是没有复选框的，它可以通过属性checkbox设置让它进行展示的，如下代码是我项目里面的代码。其中cascadeCheck是否让树控件级联的，默认是级联，也就是只要父控件被选中，所有其子控件都会被选中，我们可以设置它为false，让它不级联，这样在很多情况下是需要的。
$('#treeFunctionView').tree({
checkbox: true,
cascadeCheck: false,
url: '/Function/GetRoleFunctionByUser?userId=@Session["UserId"]',
onClick: function (node) {
});4）树控件的全选和全不选择这个全部不选的特性，我找了很多文章，都没有找到，其实后来才发现，我们对树的节点理解有偏差，认识到后，实现起来也很容易。如取消全部节点的选中状态，代码如下所示。它的方法getChecked是返回所有的节点，而不是一个节点。它们把全部选中的节点放到一个结合里面，不像Winform里面，树节点需要递归查询，这里只需要一个for循环就可以展开了，我这里把所有勾选的节点，设置为非勾选状态就可以实现取消全部树节点勾选状态了。
function unCheckTree(tree) {
var nodes = $('#' + tree).tree('getChecked');
if (nodes) {
for (var i = 0; i & nodes. i++) {
$('#' + tree).tree('uncheck', nodes[i].target);
}我们知道，很多树控件，为了方便操作，都提供了一个全选或者全部不选的操作，这个在EasyUI的树控件里面，也是很容易实现的。这里的getChildren和上面的意思类似，也是返回所有的子节点，不需要在进行递归，用一个for循环就可以遍历全部节点和其下面的多级子节点了。也就是说，它是一个二维的数据，不用递归查询。
function checkAllTree(tree, checked) {
var children = $('#' + tree).tree('getChildren');
for (var i = 0; i & children. i++) {
if (checked) {
$('#' + tree).tree('check', children[i].target);
$('#' + tree).tree('uncheck', children[i].target);
}&5）下拉列表的树控件初始化除了普通的树列表，还有一种比较特殊的树控件，就是在ComboTree,也就是在下拉列表中集成树控件，它的操作和普通的树控件差不多，很多事件属性都一样，它的使用代码如下所示。
//初始化公司
function initCompany() {
$('#txtCompany_ID').combotree({
url: '/User/GetMyCompanyTreeJson?userId=@Session["UserId"]',
valueField: 'id',
textField: 'text',
required: true,
onClick: function (node) {
}&2、树控件的优化1）普通的Json数据生成前面说了，我们为了方便，一般使用Json数据和javascript打交道，而EasyUI的树控件支持很好地的Json链接绑定，因此我们只需要在对应的控制器里面实现json数据的生成即可，如果是一开始想要确定的Json数据，一般也是通过手工生成的居多，如下代码所示。
public ActionResult GetTreeJson()
string folder = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
string leaf = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
string json = GetTreeJson(-1, folder, leaf);
json = json.Trim(',');
return Content(string.Format("[{0}]", json));
/// &summary&
/// 递归获取树形信息
/// &/summary&
/// &param name="PID"&&/param&
/// &returns&&/returns&
private string GetTreeJson(int PID, string folderIcon, string leafIcon)
string condition = string.Format("PID={0}", PID);
List&OUInfo& nodeList = BLLFactory&OU&.Instance.Find(condition);
StringBuilder content = new StringBuilder();
foreach (OUInfo model in nodeList)
int ParentID = (model.PID == -1 ? 0 : model.PID);
//string tempMenu = string.Format("{{ id:{0}, pId:{1}, name:/"{2}/",icon:/"{3}/" }},", model.ID, ParentID, model.Name, imgsrc);
string subMenu = this.GetTreeJson(model.ID, folderIcon, leafIcon);
string parentMenu = string.Format("{{ /"id/":{0}, /"pId/":{1}, /"name/":/"{2}/" ", model.ID, ParentID, model.Name);
if (string.IsNullOrEmpty(subMenu))
if (!string.IsNullOrEmpty(leafIcon))
parentMenu += string.Format(",/"icon/":/"{0}/" }},", leafIcon);
parentMenu += "},";
if (!string.IsNullOrEmpty(folderIcon))
parentMenu += string.Format(",/"icon/":/"{0}/" }},", folderIcon);
parentMenu += "},";
content.AppendLine(parentMenu.Trim());
content.AppendLine(subMenu.Trim());
return content.ToString().Trim();
} 上面的代码很好实现了根据数据库结构的关系，生成Json数据，但是感觉部分硬编码，凑出来的数据，始终感觉不太理想，如果我们要简化，该如何操作呢？&2）简洁美观的Json数据生成本小节继续上面的议题，看如何简化json的生成，因为我们需要很多这样的json操作，如果采用上面的方法，我感觉很容易出错，而且也不太美观。为了解决这个问题，我们可以通过定义一个json数据的实体类，用来承载相关的信息，如下定义所示。
/// &summary&
/// 定义EasyUI树的相关数据，方便控制器生成Json数据进行传递
/// &/summary&
[DataContract]
[Serializable]
public class EasyTreeData
/// &summary&
/// &/summary&
[DataMember]
public string id { }
/// &summary&
/// 节点名称
/// &/summary&
[DataMember]
public string text { }
/// &summary&
/// 是否展开
/// &/summary&
[DataMember]
public string state
/// &summary&
/// 图标样式
/// &/summary&
[DataMember]
public string iconCls { }
/// &summary&
/// 子节点集合
/// &/summary&
[DataMember]
public List&EasyTreeData& children { }
/// &summary&
/// 默认构造函数
/// &/summary&
public EasyTreeData()
this.children = new List&EasyTreeData&();
this.state = "open";
/// &summary&
/// 常用构造函数
/// &/summary&
public EasyTreeData(string id, string text, string iconCls = "", string state = "open")
this.text =
this.state =
this.iconCls = iconC
/// &summary&
/// 常用构造函数
/// &/summary&
public EasyTreeData(int id, string text, string iconCls = "", string state = "open")
this.id = id.ToString();
this.text =
this.state =
this.iconCls = iconC
}然后，我们在需要生成Json数据的地方，使用这个实体类进行承载，然后把它列表生成Json就可以了，很简单了，呵呵。
/// &summary&
/// 根据用户获取对应人员层次的树Json
/// &/summary&
/// &param name="deptId"&用户所在部门&/param&
/// &returns&&/returns&
public ActionResult GetUserTreeJson(int deptId)
List&EasyTreeData& treeList = new List&EasyTreeData&();
treeList.Insert(0, new EasyTreeData(-1, "无"));
List&UserInfo& list = BLLFactory&User&.Instance.FindByDept(deptId);
foreach (UserInfo info in list)
treeList.Add(new EasyTreeData(info.ID, info.FullName, "icon-user"));
string json = ToJson(treeList);
return Content(json);
}如果需要递归的操作，一样的方式处理就可以了。
/// &summary&
/// 获取用户的部门树结构(分级需要）
/// &/summary&
/// &param name="userId"&用户ID&/param&
/// &returns&&/returns&
public ActionResult GetMyDeptTreeJson(int userId)
StringBuilder content = new StringBuilder();
UserInfo userInfo = BLLFactory&User&.Instance.FindByID(userId);
if (userInfo != null)
OUInfo groupInfo = GetMyTopGroup(userInfo);
if (groupInfo != null)
List&OUNodeInfo& list = BLLFactory&OU&.Instance.GetTreeByID(groupInfo.ID);
EasyTreeData treeData = new EasyTreeData(groupInfo.ID, groupInfo.Name, GetIconcls(groupInfo.Category));
GetTreeDataWithOUNode(list, treeData);
content.Append(base.ToJson(treeData));
string json = string.Format("[{0}]", content.ToString().Trim(','));
return Content(json);
}上面使用EasyTreeData来承载数据，然后构建列表，其本身就是一个多层级的树对象，然后一个ToJson的方法就可以把列表对象完美转换为Jason数据了。这里的ToJson，主要就是调用JavaScriptSerializer 对象进行的操作，如下所示。
/// &summary&
/// 把对象为json字符串
/// &/summary&
/// &param name="obj"&待序列号对象&/param&
/// &returns&&/returns&
protected string ToJson(object obj)
string jsonData = (new JavaScriptSerializer()).Serialize(obj);
return jsonD
}&3、树控件效果展示在介绍如何使用它之后，我们来看看我几个场景中使用树控件进行的展示效果，方便我们加深上面EasyUI树控件使用的了解。1）组织机构列表如下所示：2）角色树列表展示&3）功能树列表展示4）菜单树列表展示5）登陆日志树列表展示6）下拉列表树展示&&& &&&&