使用easyui的datagrid编写矩阵，页面上呈现一个个小方框可以勾选：
如下：
<div id="page-inner" style ="height:500px;">
<div class="infoCon" style="padding-top:20px;height:300px;">
<a id="addbtn" href="javascript:newman();" class = "easyui-linkbutton" data-options="iconCls:'icon-add',plain:'true'">新增</a>
<a id="removebtn" href="javascript:removeman();" class = "easyui-linkbutton" data-options="iconCls:'icon-remove',plain:'true'">删除</a>
<a id="savebtn" href="javascript:saveman();" class = "easyui-linkbutton" data-options="iconCls:'icon-save',plain:'true'">保存</a>
<div style="width:auto; display:block; font-size:18px; vertical-align:bottom;">
<table id = "hellodatagrid" class="easyui-datagrid" fitCloumns="true"
data-options="url: 'gethellolist.do?projectid=${proid}',">
<thead>
<tr>
<th data-options="field:'cb',checkbox:'true'" formatter="formatcheckbox"></th>
<th data-options="field:'id',hidden:'true'"></th>
<th data-options="field:'roles',width:90" align="center" formatter="formatroles">人员角色</th>
<th data-options="field:'isleader',width:90" align="center" formatter="formatisleader">是否为领导</th>
<th data-options="field:'isman',width:90" align="center" formatter="formatisman">是否为男性</th>
<th data-options="field:'ismarry',width:90" align="center" formatter="formatismarry">是否已婚</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function formatcheckbox(val,row){
return "<div style='position:relative'><input type='checkbox' sytle='width:24px;' id='"+row.id+"')/><div style='background:rgba(255,255,255,0);position:absolute;width:17px;height:15px;left:0'></div></div>";
}
<!-- 根据从数据库获取的值动态显示角色名称 -->
function formatroles(val,row){
val html = '<select id="'+row.id+'roles" class="form-control" align="center" style="width:120px;border:none;background:transparent;">';
html +='<option value="1">项目经理</option>';
html +='<option value="2">产品经理</option>';
html +='<option value="3">开发组经理</option>';
html +='</select>';
html = html.replace('<option value="'+row.roles+'"', '<option value="'+row.roles+'"selected');
return html;
}
function formatisleader(val,row){
if(val=='1'){//1表示勾选上的 checked = "checked"表示勾选上了的
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" checked = "checked" id="'+row.id+'isleader"/></label>';
}else{
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" id="'+row.id+'isleader"/></label>';
}
}
function formatisman(val,row){
if(val=='1'){//1表示勾选上的 checked = "checked"表示勾选上了的
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" checked = "checked" id="'+row.id+'isman"/></label>';
}else{
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" id="'+row.id+'isman"/></label>';
}
}
function formatismarry(val,row){
if(val=='1'){//1表示勾选上的 checked = "checked"表示勾选上了的
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" checked = "checked" id="'+row.id+'ismarry"/></label>';
}else{
return html ='<label style="width:100%"><input type="checkbox" style="width:24px;height:18px;" id="'+row.id+'ismarry"/></label>';
}
}
<!--=====================到此为止矩阵算是出来了，接下来是要新增行 -->
function newman(){
var random = randomstring()+'newcheckbox';
$('#hellodatagrid').datagrid('insertRow',{
index:0,
row:{
id:random ,
roles :'',
isleader:'',
isman:'',
ismarry:'',
}
});
}
function randomstring(){//随机生成字符串
var st ="";
var charset ="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for(var i=0; i<10; i++){
st += charset.charAt(Math.floor(Math.random()*charset.length));
}
return st;
}
<!-- ================删除行====================-->
function removeman(){
var data=$('#hellodatagrid').datagrid('getChecked');
var ids = [];
for(var i=0; i<data.length;i++){
ids.push(data[i].id);
}
if(ids.length==0){
layer.alert('请选择要删除的行'，{icon:2});
return;
}else{
layer.confirm('确定要删除吗？'，{icon:3,title:'确定'}，function(t){
if(t){
$.ajax({
type:"POST",
url:"removeman.do",
cache:false,
async:false,
data:{
"id":ids.toString(), //把id的数组转成字符串传到后台
},
dataType:"json",
success:function(data){
if(data.status){
layer.msg(data.info,{icon:6});//把结果放在返回的对象中，该对象有对应的info属性字段
$('#hellodatagrid').datagrid('reload');
}else{
layer.msg(data.info,{icon:5});
}
}
});
}
});
}
}
<!-- =======================保存矩阵信息============================ -->
function saveman(){
var mans = $('#hellodatagrid').datagrid('getRows');//获取所有行
var str = [];//定义一个数据
for(var i=0;i<mans.length;i++){
var arr ={};
id = mans[i].id;//获取每一行的id
arr.roles=function(){//相当于给arr追加每一行角色单元格的值
return document.getElementById(id+"roles").value;//获取每一行对应的角色单元格的值
}();
arr.isleader=function(){
var chek = document.getElementById(id+"isleader").value;
if(chek.checked){//判断该“是否为领导”单元格是否已勾选上,勾选上后就赋值为1,
return "1";
}else{
return "0";
}
}();
arr.isman=function(){
var chek = document.getElementById(id+"isman").value;
if(chek.checked){
return "1";
}else{
return "0";
}
}();
arr.ismarry=function(){
var chek = document.getElementById(id+"ismarry").value;
if(chek.checked){
return "1";
}else{
return "0";
}
}();
str[i] = arr;//把每一行的每个单元格的值赋给数组str
}
layer.confirm('确定保存吗？'，{icon:3,title:'确定'}，function(t){
if(t){
$.ajax({
type:"POST",
url:"saveman.do",
cache:false,
async:false,
data:{
maninfo:JSON.stringify(str), //把数组转换成字符串
},
dataType:"json",
success :function(data){
if(){
layer.msg("保存成功"，{icon:6});
$("#hellodatagrid").datagrid('reload');
}else{
layer.msg("保存失败"，{icon:6});
}
}
});
}
});
}
</script>
以上矩阵的基本内容是完成了，那么后台如何对应呢，这里只简单写一下保存时如何接受前端传过来的矩阵数据：
@RequestMapping(value="saveman.do",method=RequestMthod.POST)
@ResponseBody
public Object svaeman(String maninfo){//maninfo最好要和前端的保持一致就不需要其他注解标注了
com.alibaba.fastjson.JSONArray mans = com.alibaba.fastjson.JSONObject.parseArray(maninfo);//把字符串转成JSON数组
Iterator<Object> it = mans.iterator();//遍历数组
List<ManDTO> manlist = new ArrayList<>();
while(it.hasNext()){
JSONObject jman = (JSONObject)it.next();//转换成json对象类型方便获取对应字段值
ManDTO manDTO = new ManDTO();
manDTO.setRoles(jman.getString("roles"));
manDTO.setIsleader(jman.getString("isleader"));
manDTO.setIsman(jman.getString("isman"));
manDTO.setIsmarry(jman.getString("ismarry"));
manlist.add(manDTO);
}
if(manlist.size()>0){
int result = manservice.saveman(manlist);//这个保存属于批量保存，下一篇的oracle批量保存会讲到
if(result > 0){
return Result("保存成功"，Boolean.TRUE);
}else{
return Result("保存失败"，Boolean.FALSE);
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
