多表查询

在我们日常浏览网页时我们选择了一条内容会出现点击查看详情的按钮当我们点击后我们选择到的内容里面会显示一些隐藏在网页上的内容，这些内容是我们新增个人信息的时候系统另外添加在另一张表的数据，今天我们就来实现这个简单的功能。

cols: [[
{ title: '序号', type: 'numbers' },
{ title: '操作', templet: setOption, align: 'center' },
{ title: '用户名', field: 'UserNuber', align: 'center' },
{ title: '员工姓名', field: 'StaffName', align: 'center' },
{ title: '角色', field: 'RoleName', align: 'center' },
{ title: '性别', field: 'Sex', align: 'center' },
{ title: '手机号', field: 'StaffPhone', align: 'center' },
{ title: '邮箱', field: 'mail', align: 'center' },
{ title: '地址', field: 'HA', align: 'center' },
{ title: '状态', templet: UserState, align: 'center' }
]],

以上的数据是我需要在页面上显示出来的，所以我就使用了layui的表格渲染出以上的表头来供页面上显示这些数据。
当我们没有点击详情按钮的时候页面只会显示我所渲染出来的数据，当点击详情后则会显示所有跟这条内容有关联的数据。

function Details(StaffID) {
$("#formUnit input[type='reset']").click();
$("#StaffDetailsi").modal('show');
$.getJSON("SelectStaffByID?StaffID=" + SelectStaffID, function (data) {
$("#StaffID").val(data[0].StaffID);//员工ID
$("#StaffName").val(data[0].StaffName);//员工名称
$("#RoleName").val(data[0].RoleName);//角色名称
$("#UserNuber").val(data[0].UserNuber);//用户名称
$("#StaffPhone").val(data[0].StaffPhone);//手机号码
$("#Sex").val(data[0].Sex);//员工性别
$("#PriceName").val(data[0].PriceName);//价格权限
$("#WarehouseName").val(data[0].WarehouseName);//价格权限
//员工地址和邮箱为空则为————
if (data[0].HA == null && data[0].Mail == null) {
$("#HA").val("————");
$("#Mail").val("————");
}
//查看单据转换
if (data[0].ViewOtherInvoice == true) {
$("#ViewOtherInvoice").val("允许");
} else {
$("#ViewOtherInvoice").val("不允许");
}
//作废单据转换
if (data[0].VoidOtherInvoice == true) {
$("#VoidOtherInvoice").val("允许");
} else {
$("#VoidOtherInvoice").val("不允许");
}
//查看客户转换
if (data[0].ViewOtherdClient == true) {
$("#ViewOtherdClient").val("允许");
} else {
$("#ViewOtherdClient").val("不允许");
}
//员工转换
if (data[0].UserState == true) {
$("#UserState").val("启用");
} else {
$("#UserState").val("停用");
}

});
}

以上这些则是我们点击详情按钮后需要获取并且回填显示在页面上的数据，当数据库里面有为空的数据我们则用转换的形式让为空的数据显示为————，页面上为空的数据转换后我有转换了数据库里面的bool值，bool值在数据库里面显示为true和false可是我在页面上不想这样显示，我就又把true和false转换为启用或者是停用显示在页面上。
以下则是显示该员工所有数据的C#代码，新增员工的时候在很多张表中都有数据，查看员工详情的时候我们需要连接跟员工有关联的表来查看数据。