监听事件中查询表格数据

开发工具与关键技术：VS软件，监听中查询
作者：陈隆
撰写时间：2019年07月07日

这个功能其实也是一个基本的查询功能，只不过是需要监听到某一个表格中的数据信息后，提取选中的这条数据的ID进行查询二个表格中的数据，这个功能一般的项目中是用不到的，只有少数的项目才会用到的，因为多数的项目都是只需要一个表格就可以的了，并不需要根据第一个表格来查询第二个表格中的数据，这样的功能是对于有些需要用到的项目来说，用处是非常的大的，这个功能比如想要查询一个公司下有多少个部门经理，部门经理下有多少个员工，就是这个意思，那么如果是查询刚刚所说的，第一个表格就是先查询出公司的数据，然后就是第二个表格需要获取到第一个表格选中的数据的ID，这样就可以进行查询第二个表格中的数据了，如果还有第三个表格也是获取到上一个表格选中的数据的ID就可以进行查询相对应的数据了，那么到底是怎样操作的你，那么就看下图的代码就会清楚了（页面监听事件代码）
//监听单击行事件
layuiTable.on(‘row(tabDictionaryName)’, function (obj) {
//获取到选中行数据ID
dictionariesId = obj.data.DictionariesID;
//标注选中行样式
obj.tr.addClass(“layui-table-click”).siblings().removeClass(“layui-table-click”);
//选中行，勾选复选框
obj.tr.find(“div.layui-unselect.layui-form-checkbox”)[1].click();
//传递字典名表选中ID到字典项表查询
var DictionariesID = dictionariesId;
//console.log(DictionariesID);
if (DictionariesID == “” || DictionariesID == undefined) {
DictionariesID = 0;
}
//方法级渲染的重载
tabDictionaryItem.reload({
url: “/SystemDictionary/Dictionaries/selectDitionaryItem”,
where: {
DictionariesID: DictionariesID
},
page: { curr: 1 //重新从第一页开始
}
});
});
这里的代码是在需要获取数据ID的表格中的js部分写的，也就是第一个表格中写的，表格的制作那么简单，相信你们也一定会制作layui数据表格的，我这里哦就不再写制作表个的代码了，监听事件其实也不是很难的，也是一样使用layui插件来完成的，首先就是选中到需要获取的报个中的ID，然后写一个function传入参数，然后就是获取到选中行数据的ID，后面的样式和勾选复选框是给所选中的表格中添加的样式，这里的样式可以根据个人的喜爱来设定样式也是可以的，然后就是需要把获取到的ID判断一下，如果这个获取到的ID是等于空或者等于undefined的就让这个ID等于0就可以了，然后就是使用插件中的方法级渲染重载来让数据重载到表格中就可以了，重载方法就是需要把获取到的数据通过URL路径传到控制器中查询，我这需要传的数据只是一个获取到的ID，就把需要传到控制器的数据写到where条件里就可以了，然后就是定义一下，数据重新从第一页开始就完成了监听事件里的代码了，那么接下来就是到了控制器的代码不分了（控制器代码）
public ActionResult selectDitionaryItem(LayuiTablePage layuiTablePage, int DictionariesID) {
List listDiction = (from tbDictionaryItem in myModels.PW_DictionaryItem
where tbDictionaryItem.DictionariesID == DictionariesID
orderby tbDictionaryItem.DictionaryItemID descending
select new dictionaryItemVo
{
DictionaryItemID = tbDictionaryItem.DictionaryItemID,
DictionaryItemName = tbDictionaryItem.DictionaryItemName
}).ToList();
//计算数据总条数
int intRow = listDiction.Count();
//分页数据
List dbDiction = listDiction
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
//实例化数据
LayuiTableData layuiTableData = new LayuiTableData(){
count = intRow,
data = dbDiction };
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
}
控制器的部分需要接收一下页面传过来的参数，然后就是查询了，查询需要的数据，查询条件就是数据库表中的ID等于页面传过来的ID，然后orderby排一下序就可以了，然后把需要的数据从实体类Vo中提取出来，提取方法就是把需要的数据的数据名或者是需要的数据的ID等于查询的表格中的对应的数据名就可以了，这里需要多少数据都是可以提取的，只要所创建的实体类VO中有的数据才可以提取哦，如果没有也可以在VO中添加相对应的字段就可以了，然后把数据转为List格式就可以了，转换格式就是在查询的最后转换就可以了，然后计算一下查询出来的数据的总条数，然后把数据分页，分页也是需要把数据的个数转换一下的，然后就是实例化所查询出来的数据了，count条数就是等于计算出来的条数，data数据等于分页好的数据就可以了，最后一个return把所有数据返回到页面就可以了然后，把相对应的字段添加到数据表格中就可以了，这样就完成了。