根据数据库动态创建CheckBox

根据数据库动态创建CheckBox

现在的网页都是越做越活，恨不得所有的网页内容都是动态生成可控制的，当然好处是大大的有，维护好维护，同时也是对用户负责，满足用户不同的需求。当然这么做就是前期代码可能难写一点，但是做的灵活了，后期维护简直就是要爽爆了。

         我现在做的一个项目就要求前台的checkbox 是根据数据库表中的字段动态生成的，而且还要基本样式可控制。

         首先大背景：我们前台用的是大家熟知的easyui，这是个好东西，简单快捷方便，语句简单，api全面，方法写的时候也简单，简直是程序员的好帮手，但是正因为它的快捷方便，灵活多变，就注定它对数据格式要求的严格，这个动态生成checkbox感触不是很大，但是easyui tree 生成的时候。。简直是。。改天再聊那个伤疤，今天先说说动态生成checkbox吧

         一：将后台传来的数据拼接成checkbox需要的json格式

                   通过查easyui 的API我们可以得到checkbox需要的基本json格式，然后就需要将我们的数据库传来的数据转换成前台需要的样子。

 public static string ComboboxJson(DataTable dt,string kField,string TextField)
{
StringBuilder sb = new StringBuilder();
sb.Append("[");
foreach (DataRow dr in dt.Rows)
{
sb.Append("{");
sb.AppendFormat(""id":"{0}",", dr[kField].ToString());
sb.AppendFormat(""text":"{0}"", dr[TextField].ToString());
sb.Append("},");
}
if (sb.ToString().EndsWith(","))
{
sb.Remove(sb.Length - 1, 1);
}
sb.Append("]");
return sb.ToString();
}

         二：公共js向div中生成checkbox

//根据数据库动态添加checkbox
//对象，高度，宽度，div的id四个参数
function addcheckbox(obj, height, width, id) {
var i;
var insertDiv = document.getElementById(id);
insertDiv.innerHTML = "";
var chkinfo;
var chkDIV;
//var txtinfo;
//解析从服务器获得的数据,循环添加复选框
for (i = 0; i < obj.length; i++) {
//为每一个复选框创建一个DIV
chkDIV = document.createElement("div");
//每一个复选框用input创建，类型为checkBox
chkinfo = document.createElement("input");
chkinfo.name = "checkboxid";
chkinfo.id = obj[i].id;
chkinfo.type = "checkbox";
//将每一个chinesename为复选框赋值
chkinfo.value = obj[i].text;
//将复选框添加到Div中
chkDIV.appendChild(chkinfo);
//为Div设置样式
chkDIV.style.height = height;
chkDIV.style.width = width;
chkDIV.style.float = "left";
chkDIV.align = "left";
chkDIV.appendChild(document.createTextNode(obj[i].text));
//将创建的div添加到前台预留的DIV下
insertDiv.appendChild(chkDIV);
}
}

         三：函数的调用

$.ajax({
type: "Post",
url: "Right.ashx",
data: {'backfunction':'getrolecheckbox'},
success:function(strJson){
var obj = eval(strJson);
addcheckbox(obj, "50px", "150px", "checkbox");
}
})

         用户有千变万化的需求，代码不断地改不能怪用户，只能怪自己没有站在用户的角度，好好的为人民服务一把，代码要写灵活，写的抽象，这才刚刚开始啊

最后

以上就是健康航空为你收集整理的根据数据库动态创建CheckBox的全部内容，希望文章能够帮你解决根据数据库动态创建CheckBox所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。