根据数据库动态创建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");        }        })

        

        

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