EasyUI DataGrid 資料表格的表頭可輸入文字
實作EasyUI DataGrid 資料表格的表頭可輸入文字，友善搜尋。（本文是實作了編輯功能未實作搜尋比對）（非單元格）
思路：表頭單元格綁定輕按兩下事件，選中的單元格動态添加一個input标簽，回車或者失去焦點的時候删除input這個标簽
效果
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表頭可輸入搜尋</title>
<link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/default/easyui.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="./jquery-easyui//themes/icon.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="./jquery-easyui//jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui//jquery.easyui.min.js"></script>
<script src=""></script>
<style>
</style>
</head>
<body>
<table id="tabledg" class="easyui-datagrid" title="Format DataGrid Columns" style="width:700px;height:250px"
data-options="">
<thead>
<tr>
<th id="itemid" data-options="field:'name',width:80">Item ID</th>
<th id="itemid2" data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th id="itemid3" data-options="field:'status',width:100,
editor:{
type:'combobox',
options:{
panelHeight:'auto',
valueField:'value',
textField:'status',
data:[{'status':'投','value':0},{'status':'退','value':1}]
}}">壓闆狀态</th>
</tr>
</thead>
</table>
<script>
function getData() {
var rows = [];
for (var i = 1; i <= 10; i++) {
var amount = Math.floor(Math.random() * 1000);
var price = Math.floor(Math.random() * 1000);
rows.push({
inv: 'Inv No ' + i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name ' + i,
status: (i % 2)?"投":"退",
listprice: amount
});
}
let d = {};
d["rows"] = rows;
d["total"] = rows.length;
return d;
}
$(function() {
let data = getData();
$("#tabledg").datagrid("loadData", data);
})
//
function focusout(obj)
{
$(obj.parentElement).children("div").show();
obj.remove()
}
function keydown(event,obj)
{
console.log($(obj).attr("index"),$(obj).attr("field"));
if (event.keyCode == 13) //enter 的時候删除
{
$(obj.parentElement).children("div").show();
obj.remove()
}
//去做其他邏輯
//、、、、、、、、、
}
//擷取表頭然後綁定事件
//可以利用ID擷取也可以利用class來擷取
$(function(){
let children = $(".datagrid-header-row").find("td"); //頁面多個table的時候有問題
console.dir(children);
children.each(function(index,element){
console.log($(element).attr("field"));
//方式1
$(element).dblclick(function(){
//this.index = index; //儲存域index
let field = $(element).attr("field"); //儲存域名
let w = $(this);
//console.log(w["context"].clientWidth,w["context"].clientHeight); //擷取寬高
//let width = w["context"].clientWidth - 10
let width = w[0].offsetWidth - 10
let itemsstr = `<input type='text' index='${index}' field='${field}' style='height:auto;width:${width}px' onblur='focusout(this)' onkeydown='keydown(event,this)'/>`;
$(this).prepend(itemsstr)
$(this).children("div").hide(); //隐藏文字顯示
$(this).children("input").focus();//擷取焦點
console.log($(element));
console.log(width);
})
//方式2
// $(element).dblclick(function(){
// let w = $(this);
// let item = document.createElement("input")
// let width = w["context"].offsetWidth-10;
// item.style.width = width+"px"
// $(this).prepend(item)
// $(this).children("div").hide(); //隐藏文字顯示
// item.focus(); //擷取焦點
// item.index = index; //儲存域index
// item.field = $(element).attr("field") //儲存域名
// //事件綁定
// item.onkeydown = function(event)
// {
// console.log(this.index);
// if (event.keyCode == 13) //enter 的時候删除
// {
// $(this.parentElement).children("div").show();
// this.remove()
// }
// //去做其他邏輯
// //、、、、、、、、、
// }
// item.onblur = function() //失敗了 onfocusout 是以用onblur
// {
// $(this.parentElement).children("div").show();
// this.remove()
// }
// })
//==================================================================
})
})
$(function(){
//利用ID的方式擷取設定
//原理同上
//實作方式1
// $("#itemid").dblclick(function(){
// let w = $(this);
// console.log(w["context"].clientWidth,w["context"].clientHeight); //擷取寬高
// console.log(w["context"].offsetWidth,w["context"].offsetHeight); //擷取
// console.log(w["context"].offsetLeft);
// let width = w["context"].clientWidth - 10
// let index = 1;
// let field = "itemid"
// let itemsstr = `<input type='text' index='${index}' field='${field}' style='height:auto;width:${width}px' onblur='focusout(this)' onkeydown='keydown(event,this)'/>`;
// $(this).prepend(itemsstr)
// $(this).children("div").hide(); //隐藏文字顯示
// $(this).children("input").focus();//擷取焦點
// })
// //方式2
// $("#itemid3").dblclick(function(){
// let w = $(this);
// console.log(w["context"].clientWidth,w["context"].clientHeight);
// console.log(w["context"].offsetWidth,w["context"].offsetHeight);
// console.log(w["context"].offsetLeft);
// let width = w["context"].offsetWidth-10;
// let item = document.createElement("input")
// item.style.width = width+"px"
// $(this).prepend(item)
// $(this).children("div").hide(); //隐藏文字顯示
// item.focus(); //擷取焦點
// //事件綁定
// item.onkeydown = function(event)
// {
// if (event.keyCode == 13) //enter 的時候删除
// {
// $(this.parentElement).children("div").show();
// this.remove()
// }
// //去做其他邏輯
// //、、、、、、、、、
// }
// item.onblur = function() //失敗了 onfocusout 是以用onblur
// {
// $(this.parentElement).children("div").show();
// this.remove()
// }
// })
})
</script>
</body>
</html>
![[VB.NET]關于VB.NET的列印功能 高手都跑那裡去了?????[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)