Bảng bộ lọc thả xuống javascript

Tất cả các đối tượng cốt lõi hoặc "lớp" trong FooTable đều được lấy từ FooTable. đối tượng lớp. Đối tượng này hiển thị một phương thức duy nhất có tên là extend, cho phép bạn tạo một lớp hoàn toàn mới từ một lớp cơ sở (kế thừa) hoặc chỉ ghi đè một phương thức duy nhất trên một lớp hiện có. Trong ví dụ này, chúng ta sẽ kế thừa FooTable cơ sở. Lọc thành phần, sửa đổi nó và sau đó thay thế nó bằng phiên bản đã sửa đổi của chúng tôi

FooTable.MyFiltering = FooTable.Filtering.extend({ // inherit the base class
	construct: function(instance){ // override the default constructor
		this._super(instance); // call the base constructor
	}
});

Bước 2. Thêm thuộc tính tùy chỉnh cho danh sách thả xuống

Để làm cho mã dễ bảo trì hơn trong tương lai và dễ hiểu hơn, chúng tôi sẽ thêm một số thuộc tính vào thành phần lọc tùy chỉnh của chúng tôi để giữ các tùy chọn có sẵn, tùy chọn mặc định và trình bao bọc jQuery xung quanh trình đơn thả xuống của chúng tôi

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

Bước 3. Tạo danh sách thả xuống và nối nó vào bảng

Để tạo phần tử thả xuống thực tế và nối nó vào bảng, chúng tôi sẽ ghi đè phương thức $create và tạo đánh dấu của chúng tôi theo yêu cầu. Thành phần lọc cơ sở hiển thị thuộc tính $form là trình bao bọc jQuery cho biểu mẫu chứa đầu vào tìm kiếm mặc định. Sử dụng điều này, chúng tôi có thể chỉ cần tạo danh sách thả xuống của mình và nối thêm nó theo yêu cầu

Thao tác - người dùng sẽ chọn Tên chủ đề từ menu thả xuống được chọn- sau đó nhấp vào bất kỳ nút radio nào (trên, dưới, giữa) rồi nhập giá trị vào hộp văn bản -> nhấp vào nút Bộ lọc, sau đó bảng sẽ hiển thị dữ liệu đã lọc

Lớp .dropdown sử dụng position:relative, cần thiết khi chúng tôi muốn nội dung thả xuống được đặt ngay bên dưới nút thả xuống (sử dụng position:absolute)

Lớp .dropdown-content giữ menu thả xuống thực tế. Nó được ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Lưu ý rằng min-width được đặt thành 230px. Hãy thay đổi điều này. Mẹo. Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

0 thành 100% (và

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

1 để cho phép cuộn trên màn hình nhỏ)

Trường tìm kiếm (#myInput) được tạo kiểu để vừa với menu thả xuống. Chúng tôi đã thêm một biểu tượng tìm kiếm, được đặt ở bên trái bên trong trường tìm kiếm để cho biết rằng đây thực sự là một trường tìm kiếm

Menu thả xuống là menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước

Tự mình thử »

---

Tạo danh sách thả xuống có thể di chuột

Tạo menu thả xuống xuất hiện khi người dùng di chuyển chuột qua một phần tử

Bước 1) Thêm HTML

Ví dụ

  Menu thả xuống
 

    Liên kết 1
    Liên kết 2
    Liên kết 3
 

Ví dụ giải thích

Sử dụng bất kỳ phần tử nào để mở menu thả xuống, e. g. một, hoặc

thành phần

Sử dụng phần tử vùng chứa (như

) để tạo menu thả xuống và thêm các liên kết thả xuống bên trong nó

bọc một

phần tử xung quanh nút và

để định vị chính xác menu thả xuống bằng CSS

---

Bước 2) Thêm CSS

Ví dụ

/* Nút thả xuống */
. dropbtn {
  màu nền. #04AA6D;
  màu. màu trắng;
  phần đệm. 16px;
  cỡ chữ. đường viền 16px;
 . không;
}

/* Vùng chứa

- cần thiết để định vị nội dung thả xuống */
. menu thả xuống {
  vị trí. tương đối;
  hiển thị. khối nội tuyến;
}

/* Nội dung thả xuống (Ẩn theo mặc định) */
. nội dung thả xuống {
  hiển thị. không;
  vị trí. tuyệt đối;
  màu nền. #f1f1f1;
  chiều rộng tối thiểu. 160px;
  bóng hộp. 0px 8px 16px 0px rgba(0,0,0,0. 2);
  chỉ mục z. 1;
}

/* Liên kết bên trong danh sách thả xuống */
. nội dung thả xuống có màu {
  . màu đen;
  phần đệm. 12px 16px;
  trang trí văn bản. không;
  hiển thị. chặn;
}

/* Thay đổi màu của liên kết thả xuống khi di chuột */
. nội dung thả xuống a. di chuột {màu nền. #ddd;}

/* Hiển thị menu thả xuống khi di chuột */
. thả xuống. bay lượn. nội dung thả xuống {hiển thị. khối;}

/* Thay đổi màu nền của nút thả xuống khi nội dung thả xuống được hiển thị */
. thả xuống. bay lượn. dropbtn {màu nền. #3e8e41;}

Try it Yourself »

Ví dụ giải thích

Chúng tôi đã tạo kiểu cho nút thả xuống bằng màu nền, phần đệm, v.v.

Lớp .dropdown sử dụng position:relative, cần thiết khi chúng tôi muốn nội dung thả xuống được đặt ngay bên dưới nút thả xuống (sử dụng position:absolute)

Lớp .dropdown-content giữ menu thả xuống thực tế. Nó được ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Lưu ý rằng min-width được đặt thành 160px. Hãy thay đổi điều này. Mẹo. Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

0 thành 100% (và

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

1 để cho phép cuộn trên màn hình nhỏ)

Thay vì sử dụng đường viền, chúng tôi đã sử dụng thuộc tính

FooTable.MyFiltering = FooTable.Filtering.extend({
	construct: function(instance){
		this._super(instance);
		this.statuses = ['Active','Disabled','Suspended']; // the options available in the dropdown
		this.def = 'Any Status'; // the default/unselected value for the dropdown (this would clear the filter when selected)
		this.$status = null; // a placeholder for our jQuery wrapper around the dropdown
	}
});

9 để làm cho menu thả xuống trông giống như một "thẻ". Chúng tôi cũng sử dụng chỉ mục z để đặt danh sách thả xuống trước các phần tử khác

Bộ chọn extend0 được sử dụng để hiển thị menu thả xuống khi người dùng di chuyển chuột qua nút thả xuống

Làm cách nào để tạo bộ lọc danh sách thả xuống cho một bảng bằng jquery?

Làm cách nào để tạo bộ lọc tìm kiếm trong JavaScript?

Làm cách nào để lọc dữ liệu trong DropDownList trong asp net?