ASP.NET-FineUI开发实践-8(二)

时间:2023-12-14 14:37:26

把上回的做一些改进

1.点击grid2的行改变TriggerBox1的值
                var v = $(item).find('.x-grid-cell-Name div.x-grid-cell-inner').text();
$("#<% =TriggerBox1.ClientID %>-inputCell").children("input").val(v);

  

通过JQ改的第一行是取值,第二行是赋值
2.改变TriggerBox1的值随时刷新grid2,做个模糊查询,只要绑定事件触发后台就可以了
            //TriggerBox1值改变事件简单过滤
F('<% =TriggerBox1.ClientID %>').on('change', function (field, newvalue, oldvalue) {
F.customEvent('TriggerBox1_change_' + newvalue);
});

  

问题又来了,第一个方法是行点击改变TriggerBox1,第二个方法是改变TriggerBox1后刷新列表,冲突了,想了想TriggerBox1获取焦点才触发改变事件。给出全部代码。
JS
        function showhide() {
F('<% =Grid2.ClientID%>').hide();
}
function tbxMyBox1_TriggerClick(t) {
F.customEvent('Grid2_bind_');
//先隐藏
F('<% =Grid2.ClientID%>').hide();
//位置设定样式
$('#Grid2_wrapper').css('top', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());
$('#Grid2_wrapper').css('left', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
$('#Grid2_wrapper').css('position', 'fixed');
$('#Grid2_wrapper').css('z-index', '9999');
//显示方法
F('<% =Grid2.ClientID%>').show(F('<% =TriggerBox1.ClientID %>').getEl(), function () {
//页面的点击事件
$(document).click(function (e) {
var target = $(e.target);
//判断是否点击的位置,是gird和当前编辑的TriggerBox1就不变,点击其他位置就隐藏grid
//closest是一层层找上层元素,找不到返回0,可以在网上看看例子
//第二个判断是grid是否隐藏,显示的再触发隐藏
if (target.closest("#<% =Grid2.ClientID%>").length == 0 && !F('<% =Grid2.ClientID%>').isHidden() && target.closest("#<% =TriggerBox1.ClientID%>").length == 0) {
showhide();
}
});
});
}
var tbxMyBox1 = '<%= TriggerBox1.ClientID %>';
// 页面AJAX回发后执行的函数
F.ready(function () {
//浮动grid2能跑加上就不跑了
F('<% =Grid2.ClientID%>').draggable = false;
//编辑之前的事件
F('<% = Grid1.ClientID %>').on('beforeedit', function (editor, e) {
//列名
if (e.field == 'Name') {
//列号
window._selectrowIndex = e.rowIdx;
window._selectcellIndex = e.colIdx;
window.setTimeout(function () {
//新增input获取焦点事件,获取焦点后更改则重置grid
$("#<% =TriggerBox1.ClientID %>-inputCell").children("input").on('focus', function () {
window.TriggerBox1_down = 1;
});
}, 100);
}
return true;
});
//TriggerBox1值改变事件简单过滤
F('<% =TriggerBox1.ClientID %>').on('change', function (field, newvalue, oldvalue) {
//获取焦点后更改则重置grid,没获得焦点更改则为点击选项更改
if (window.TriggerBox1_down != 1) {
F.customEvent('TriggerBox1_change_' + newvalue);
}
window.TriggerBox1_down = 0;
});
//项点击事件
F('<%= Grid2.ClientID %>').on('itemmousedown', function (View, record, item, index, e) {
F('<% =Grid1.ClientID%>').f_cellEditing.cancelEdit();
F('<% =Grid1.ClientID%>').f_cellEditing.startEditByPosition({
row: _selectrowIndex, column: _selectcellIndex
});
var v = $(item).find('.x-grid-cell-Name div.x-grid-cell-inner').text();
$("#<% =TriggerBox1.ClientID %>-inputCell").children("input").val(v);
});
//行双击事件
F('<% =Grid2.ClientID%>').on('itemdblclick', function (grid, record, item, index) {
F.customEvent('Grid2_click_' + index);
F('<% =Grid2.ClientID%>').hide();
});
});

  

注意注释,都不是白写的,注意触发后台的方法F.customEvent
ASP.NET-FineUI开发实践-8(二)
ASP.NET-FineUI开发实践-8(二)
后台CS
        protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)
{
//值改变事件
if (e.EventArgument.IndexOf("TriggerBox1_change_") >= 0)
{
//得到新输入的值
string newvalue = e.EventArgument.Split('_')[2].ToString();
DataTable table = GetDataTable();
DataRow[] dRows = table.Select("Name like '" + newvalue + "%'");
DataTable dtNew = table.Copy();
dtNew.Rows.Clear();
foreach (DataRow dr in dRows)
{
dtNew.Rows.Add(dr.ItemArray);
//dtNew.Rows.Add(dr);
}
//重新绑定表
Grid2.DataSource = dtNew;
Grid2.DataBind();
}
//双击事件
if (e.EventArgument.IndexOf("Grid2_click_") >= 0)
{
int index = Convert.ToInt32(e.EventArgument.Split('_')[2].ToString());
string name = Grid2.Rows[index].Values[Grid2.FindColumn("Name").ColumnIndex].ToString();
DataTable table = GetDataTable();
foreach (DataRow row in table.Rows)
{
if (row["Name"].ToString() == name)
{
string deleteScript = Grid1.GetDeleteIndexReference();
//string deleteScript = "";
JObject defaultObj = new JObject();
defaultObj.Add("Name", row["Name"].ToString());
defaultObj.Add("Gender", row["Gender"].ToString());
defaultObj.Add("EntranceYear", row["EntranceYear"].ToString());
defaultObj.Add("EntranceDate", row["EntranceDate"].ToString());
defaultObj.Add("AtSchool", (bool)row["AtSchool"]);
defaultObj.Add("Major", row["Major"].ToString());
PageContext.RegisterStartupScript(
deleteScript //删除当前行
+ Grid1.GetAddNewRecordReferenceByindex(defaultObj) //新增定义的行
+ "");//把窗体管理
}
}
}
//重新绑定事件
if (e.EventArgument.IndexOf("Grid2_bind_") >= 0)
{
DataTable table = GetDataTable();
Grid2.DataSource = table;
Grid2.DataBind();
}
}

  要改的地方还是grid显示的位置,好像是不好弄,凑合看吧,主要是方法。

 实例源码:CSDN 10分