基于MVC+EasyUI的Web開發框架經驗總結（1）-利用jQuery Tags Input 插件顯示選擇記錄

最近花了不少時間在重構和進一步提煉我的Web開發框架上，力求在用戶體驗和界面設計方面，和Winform開發框架保持一致，而在Web上，我主要采用EasyUI的前端界面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也積累了不少經驗，本系列將主要介紹我在進一步完善我的Web框架基礎上積累的經驗進行分享，本隨筆主要介紹利用jQuery Tags Input 插件顯示選擇記錄。

我在利用jQuery Tags Input 插件之前，一直想找一個合適的Jquery插件或者合適的做法，來實現我Winform框架里面權限系統的一個用戶選擇場景，就是能夠記錄用戶的選擇，并最終能夠保存到數據庫里面去。在WInform里面，我可以用自定義控件的方式，很好地實現了這個功能，但是在Web界面上，我嘗試用Jquery試過了很多方法，沒能實現這個效果，花了不少時間來尋找，終于找到這個不錯的插件。

先來看看我的最終實現的Web界面效果，就是在權限管理系統里面，機構包含的用戶編輯界面，或者是角色包含人員的編輯界面里面，提供一個地方來記錄用戶的選擇，用戶確認后，可以把記錄的內容保存到數據庫里面。

上圖下面一個區域 “選擇的用戶” 里面就是我用到這個控件來展示用戶選擇的人員信息。

其實這個jQuery Tags Input 插件主要的用途，是用來記錄用戶輸入的標簽的，它可以在空白的地方接受輸入的內容的，如下所示。

不過這個JQuery的插件，也能夠屏蔽用戶的輸入，由我們通過Javaascript進行添加即可，因此就正好符合我上面例子的需求了，這個jquery插件的下載地址是（http://xoxco.com/projects/code/tagsinput/），GitHub的下載地址是（https://github.com/xoxco/jQuery-Tags-Input）。

1、jQuery Tags Input 插件的使用

應用腳本和樣式文件，如下所示。

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

由于在MVC項目里面中集成使用，因此你需要整理好合適的路徑，我的項目代碼引用的路徑如下所示。

@*Tag標簽的控件應用*@
<script src="~/Content/JQueryTools/Tags-Input/jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/JQueryTools/Tags-Input/jquery.tagsinput.css" />

簡單的例子就是在需要的表單里創建一個包含tags列表的input輸入框，你可以在value里設置默認或目前有的tags，并用逗號隔開。

<input name="tags" id="tags" value="foo,bar,baz" />

如我在MVC項目的視圖里面，增加了一個層，用來放置用戶選擇的用戶信息，和上面的例子不同，我的輸入默認初始化為空，如下所示。

<div id="tbEditChoise" data-options="region:'south',split:true,title:'選擇的用戶',iconCls:'icon-book'" > 
   <div id="selectedUsers" title="選擇的用戶" data-options="iconCls:'icon-view'" >
		<input name="tags" id="tags" value="" />
   </div>    
</div>

這個插件可以屏蔽界面上的Tag標簽輸入，從而讓腳本根據需要寫入不同的標簽。可以使用addTag() and removeTag()函數增加和刪除掉標簽，代碼如下：

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

還可以用imporTags()方法導進一組tag列表，需要注意的是這樣會將value里設置tag替換掉。

$('#tags').importTags('foo,bar,baz');

如果傳遞參數為空，那么相當于清空列表了。

$('#tags').importTags('');

使用tagExist()可以判斷一個標簽是否存在：

if ($('#tags').tagExist('foo')) { ... }

這個插件還可以接受自動提示的插入操作，如下所示。

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete'});

 如果想要在增加或移除掉標簽的時候增加額外的功能或觸發其它動作，你可以通過onAddTag和onRemoveTag這兩個參數里指定回調函。這兩個函數都返回了一個標簽值作為參數

$('#tags').tagsInput({
	width:'auto',
	onAddTag:function(tag){
		console.log('增加了'+tag)
	},
	onRemoveTag:function(tag){
		console.log('刪除了'+tag)
	}
});

前面講了，可以屏蔽界面的Tag標簽輸入，而通過腳本插入標簽，或者你想提供其它交互方式增加標簽，可以增加一個值為false的interactive參數，這樣就禁止了增加標簽，而其它的功能和呈現都跟原來一樣。

$('#tags').tagsInput({
	width:'auto',
	onRemoveTag:function(tag){
		console.log('移除標簽：'+'"'+tag+'"')
	},
	interactive:false
});

這個插件完整的調用語法代碼如下所示，根據需要使用即可。

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'interactive':true,
   'defaultText':'add a tag',
   'onAddTag':callback_function,
   'onRemoveTag':callback_function,
   'onChange' : callback_function,
   'removeWithBackspace' : true,
   'minChars' : 0,
   'maxChars' : 0 //if not provided there is no limit,
   'placeholderColor' : '#666666'
});

2、在項目中使用jQuery Tags Input 插件

前面介紹了這個插件的各種用法，其中我們看到，里面主要就是記錄用戶選擇或者錄入的名稱的，但是我們在界面上顯示用戶內容，還需要記住對應內容的ID，因為我們需要保存選擇用戶的ID，而不是它的名稱，那么我們應該如何操作呢？

前面也介紹了，在界面上使用，我們需要在視圖里面添加一個層，用來放置這個標簽內容，把它排版好就是了。

<div id="tbEditChoise" data-options="region:'south',split:true,title:'選擇的用戶',iconCls:'icon-book'" > 
   <div id="selectedUsers" title="選擇的用戶" data-options="iconCls:'icon-view'" >
		<input name="tags" id="tags" value="" />
   </div>    
</div>

然后我們在easyUI的datagrid控件里面，增加幾個按鈕，用來操作這個標簽的，也就是記錄，保存和清空幾個重要的操作。

上圖的部分代碼如下所示。

toolbar: [{
	id: 'btnAddChoise',
	text: '添加選擇',
	iconCls: 'icon-add',
	handler: function () {
		addChoise();//實現添加記錄
	},
}, '-', {
	id: 'btnComplete',
	text: '完成選擇',
	iconCls: 'icon-ok',
	handler: function () {
		completeChoise();//完成選擇并返回
	}
}, '-', {
	id: 'btnCleare',
	text: '清空',
	iconCls: 'icon-remove',
	handler: function () {
		cleareChoise();//清空用戶選擇記錄
	}
}, '-', {
	id: 'btnReload',
	text: '刷新',
	iconCls: 'icon-reload',
	handler: function () {
		//實現刷新欄目中的數據
		$("#grid").datagrid("reload");
	}
}],

前面介紹了，我們需要顯示名稱，同時也要記錄選擇的項目ID（用戶ID），那么我們可以用兩個列表對象來記錄它們，它們寫入的順序一樣，獲取的下標也就一樣了。

我們先初始化列表和Tags標簽對象，并增加一個添加用戶的封裝和移除用戶的封裝操作，代碼如下所示。

<script type="text/javascript">
	$(function () {
		$('#tags').tagsInput({
			width: 'auto',
			height: '100px',
			onRemoveTag: function (tag) {
				var i = addNameList.indexOf(tag);
				var id = addUserList[i];
				removeUser(id, tag);
			},
			interactive: false
		});
	});

	var addUserList = new Array();
	var addNameList = new Array();
	function addUser(id, name) {
		if ($.inArray(id, addUserList) == -1) {
			addUserList.push(id);
			addNameList.push(name);
			$('#tags').addTag(name);
		}
	}
	function removeUser(id, name) {
		if ($.inArray(id, addUserList) != -1) {
			addUserList.pop(id);
			addNameList.pop(name);
			$('#tags').removeTag(name);
		}
	}
</script>

清除用戶選擇的Tag操作，代碼也很簡單了，都是我小節1介紹的內容，熟練應用就是了。

//清空用戶選擇記錄
function cleareChoise() {
	$('#tags').importTags('');
	addUserList = new Array();
	addNameList = new Array();
}

對于最重要的保存操作，就是把存儲用戶ID的列表，把他們傳遞給對應的Ajax調用就搞定了。

//完成選擇并返回
function completeChoise() {
	var ouid = $('#txtID').val();
	if (ouid != "") {
		var url = '/OU/EditOuUsers?r=' + Math.random();
		saveAction(url, ouid, addUserList);
	}

	$("#DivEditUser").dialog('close');
	reloadRelation();//重新刷新
}

//保存機構用戶操作
function saveAction(url, id, newList) {
	$.ajax({
		type: 'POST',
		url: url,
		async: false,
		data: { ouid: id, newList: newList.join(',') },
		success: function (result) {
			$.messager.alert("提示", "操作成功！ ");
			$('#DivEditUser').dialog('close');
			reloadRelation();
		},
		error: function (xhr, status, error) {
			$.messager.alert("提示", "操作失敗"); //xhr.responseText
		}
	});
}

最后，我們就可以順利看到真正的結果了。

整個界面就是開始的那個了。

和我Winform權限系統里面的對應界面對比，是不是發現很接近呢？利用EasyUI創建Web界面，一樣可以做的很不錯的哦。