Jquery

Di chuyển và kiểm tra tính hợp lệ bằng jquery

Hi ! Chào các bạn .

Hôm nay mình sẽ giới thiệu một ứng dụng nhỏ mình mới làm bằng jquery . Mình cũng mới tập tành vào jquery thôi nên có thể viết còn hơi cùi . Nhưng a e nào mới học thì xem cũng được.

Cài này mình làm mục đích là để thực hành các lệnh trong jquery cho quen thôi . Ở đây mình tập trung vào phần select box trong HTML . Vì khi chúng ta làm có dính đến anh chàng này thì thường phải dùng đến jquery để xữ lý , cái này tùy người có người sữ  dụng cái này , có người sữ  dụng cái khác . Nhưng như mình đã nói ở trên là mình đang tìm hiều về jquery nên mình dùng jquery .

Vấn đề mình đặt ra ở đây là mình có 1 danh sách member được lấy từ table tbl_member . Và 3 select box , trong đó 1 là chứa danh sách để cho phép chọn manager , 1 là để chọn leader , 1 là để chọn member. 3 select box sẽ chứa nội dung giống nhau đó là danh sách member  để cho quản lý chọn lựa .

Hình minh họa ban đầu như thế này :

Giờ các bạn hình dung 1 tý , chúng ta sẽ phải chọn các thành viên cho 1 nhóm gồm 3 bộ phận như  trên . Nhưng theo 1 qui luật đó là : nếu thành viên đã được chọn làm manager thì sẽ không còn được xuất hiện trong leader và member để quản lý lựa chon và 2 vị trí kia nửa , và cũng như  vậy nếu đã là leader thì không có trong trong manager và member , nếu đã chon làm member thì sẽ không còn trong manager và leader nửa .

Nói tóm lại một vị trí có thể chọn nhiều người trừ manager còn 1 người chỉ được chọn vào 1 vị trí duy nhất .

Giờ ta sẽ vào từng bước :

Bước 1 : Chúng ta sẽ tiến hành việc dể trước , đó là di chuyễn qua lại giữa 2 selectbox . Khi ta chọn thành viên và click và nút chuyển thì thành viên sẽ được chuyễn qua selectbox bên kia . Ở đây mình sẽ làm ví dụ cho leader , còn member thì cũng tương tự  như vậy .

Bước 1 : Đầu tiên ta sẽ viết hàm sendData(sourceid, destinationid);

function sendData(sourceid, destinationid){
     $("#"+destinationid).empty().append($("#"+sourceid+"  option").clone());
     /*chuyển tất cả danh sách bên destinationid sang sourceid*/
}

Hàm nay giúp chúng ta chuyển dữ liệu từ 1 selectbox sang selectbox khác . có 2 tham
số : sourid là selectbox chứa dữ liệu cần chuyển , destinationid là selectbox chứ
dữ liệu sẽ chuyển qua.
Bước 2 : Giờ ta sẽ sữ dụng sự kiện click của nút chuyển lần lượt (tức là button ‘>’)
nó sẽ gọi đến hàm moveleft(from,to,ctrl);

function moveleft(from,to,ctrl){
       $("#"+from+"  option:selected").appendTo("#"+to);
       /*Lấy tất cả option được chọn từ selectbox from và thêm nó vào selectbox
       to */
       sendData(to,ctrl);
}

Hàm này ta sữ dụng 3 tham số , from là selectbox chuyển , to là selectbox mà dữ liệu được chuyển qua , ctrl là select box để kiếm tra tính hợp lệ , Vì khi chúng ta chọn nó làm leader thì ta sẽ load lại danh sách mà ta sẽ chọn vào vị trí member . Danh sách để chọn member sẽ không còn chứa thành viên đã chọn làm member. Tức là lúc đó danh sách member sẽ bằng danh sách thành viên ban đầu trừ  các thành viên đã chon làm leader .

Và cũng tương tự như thế chúng ta cũng sữ  dụng hàm này cho sự  kiện click ở nút ‘>’ dưới danh sách member , nêu chọn member thì ta sẽ chuyển nó qua và load lại danh sách leader bằng danh sách thành viên trừ  đi danh sách đã được chọn trong selectbox member.

Bước 3 : Trường hợp chúng ta đã chọn thành viên đó làm member hoặc leader mà giờ chúng ta muốn bỏ nó ra khỏi danh sách đó . Tức chúng ta đưa nó lại selectbox củ , ta sẽ sử dụng sự kiện click
của nút ‘<‘ để chuyển danh sách lại , và nó sẽ gọi đến hàm  moveright(from,to,ctrl);

function moveright(from,to,ctrl){
	$("#"+from+"  option:selected").appendTo("#"+to);
        /*Lấy tất cả option được chọn từ selectbox from và thêm nó vào selectbox
        to */
	sendData1(from,ctrl);
}

Hàm này tương tự như hàm trên , khác ở vị trí các selectbox còn lại thì tương tự như
hàm trên .
Ta cũng có thể gộp 2 hàm này lại thành 1 nhưng ban đầu mới làm quen thì ta cứ viết
thế cho dễ hiểu đã .
Bước 4 : Chúng ta muốn chuyển tất cả danh sách qua luôn không muốn chọn một hoặc vài
thành viên để chuyển nửa .Thì ta sẽ sữ dụng sự kiện click của nút ‘>>’ để chuyển toàn
bộ danh sách qua , hoặc nút ‘<<‘ để chuyển ngược lại  .

function sendDataAllLeft(sourceid, destinationid,ctrl){
	$("#"+sourceid+" option").appendTo("#"+destinationid);
	$("#"+ctrl).empty().append($("#"+destinationid+" option").clone());
}

Hàm này cũng sử dụng các lệnh giống với mấy hàm trên , mình sẽ không nói lại chức
năng của từng lệnh nửa .
Tương tự ta viết được hàm chuyển tất cả ngượi lại.

function sendDataAllRight(sourceid, destinationid,ctrl){
	$("#"+sourceid+" option").appendTo("#"+destinationid);
	$('#'+ctrl).empty();
}

Bước 5 : Vậy là chúng ta đã chuyển được dữ liệu qua lại và load lại các
selectbox các cho đúng với yêu cầu đặt ra .
Giờ chúng ta sẽ đi đến với sự kiện change của selectbox manager . Khi ta chọn
manager ta sẽ load lại danh sách member ,leader . Kiểm tra xem nó đã có trong
danh sách leader và member đã chọn trước đó chưa . Nếu có thì phải thông báo để
cho người dùng chọn lựa .

function chooseManager(from_leaderid,to_leaderid,from_memberid,to_memberid){
        var id = $('#manager').val();
        var from_leader = $('#'+from_leaderid);
	var to_leader = $('#'+to_leaderid);
	var from_member = $('#'+from_memberid);
	var to_member = $('#'+to_memberid);
	var len1 = from_leader.children('option').length;
	var len2 = from_member.children('option').length;
	var len3 = to_leader.children('option').length;			

	//kiem tra xem gia tri chon tren manager da ton tai trong to_leader chua
	var selected_toleader = to_leader.children('option[value="' + id + '"]');
	var selected_tomember = to_member.children('option[value="' + id + '"]');
	if (selected_toleader.length > 0)
	{
	      if(confirm(selected_toleader.text() + ' da ton tai trong leader! 
                                          Ban co chac chan chon no khong ?'))
              {
                    selected_toleader.remove();
	      }
	      else{
	            $('#manager').attr('selectedIndex', -1);
	      }
	}

	if (selected_tomember.length > 0)
	{
		if(confirm('da ton tai trong leader!
                                  Ban co chac chan chon no khong ?')){
			selected_tomember.remove();
		}
		else{
		        $('#manager').attr('selectedIndex', -1);
		}
	}

	//load lai danh sach from_leader & from_member
	from_leader.empty().append($("#manager option:not(:selected)")
                                              .not('option[value=0]').clone());
	from_leader.children('option').each (function(index, element){
	  if (to_leader.children('option[value="' + element.value + '"]').length > 0)
		{
			$(element).remove();
		}
	  if (to_member.children('option[value="' + element.value + '"]').length > 0)
		{
			$(element).remove();
		}
	});

	from_member.empty().append(from_leader.children('option').clone());
}

Nếu chọn manager trước thì chúng ta sẽ remove thành viên chọn đó ra khỏi danh sách leader , member .
Hàm này mình viết còn hơi dài dòng nhưng giờ mình mới chỉ có thể viết đến thế . Chủ yếu sữ  dụng các lệnh cơ bản nên chưa được ngắn gọn lắm .
Các lệnh sử  thì lặp đi lặp lại nhiều , các bạn xem và ai có thể viết ngắn gọn hơn thì đóng góp cho
cho mình với , để mình hoàn thiện bài viết này .

Các bạn có thể download sourcecode về chạy demo thử .
phù …. tạm thế đã !!! mệt rồi.
Chúc các bạn ngủ ngon .
Bye !!!

Write by : KhanhTran 

 

 

 

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s